Including colour into mobile template

Hi,

Can anyone help as to how to incorporate a change of color into my mobile template I have managed to change a few things but I cannot find out where to add color to the main body and category titles boxes.

Thanks and hope that makes sense, basically I want to change my background colors.

Hi,
Thank you I have seen the above link but I'm unclear about which template I put this into, I've tried a few and nothing happens. I was expecting to find the colours that are already present somewhere to reply them but I'm stuck. Thought I was doing well.
Thank you

Hi @Leah Sweeney,

You can change the color of the headers by adding the following CSS rule to your stylesheet.
Display > Colors > CSS stylesheet

Code:

.mobile_set {
  background:#C9C;
}

Also, could you post your overall_header template for the mobile version here ? I'm looking at the HTML and something isn't adding up correctly -- like there's a tag that wasn't closed. If we can figure that out I can give you something for the main background too.

Thank you for your help the colors now make sense. I'm not sure what you want regarding the header?

Also I've had to disable the mobile site as it keeps redirecting to the App Store, would this stop if I paid to stop ads? I don't want to pay and it continues.

Thank you

I imagine if the adverts are the cause of the redirection, then it should stop if the adverts were removed. I noticed an error that appeared to be coming from your header which made styling the background a tad more difficult, unless you just want to go with a CSS body rule ?

Code:

body {
  background:#C9C;
}

( that would affect both the mobile and normal versions )

I have managed to change the title colors thank you.
Can I change the category icons on the mobile site and the category background color.

Sorry for all the questions but your help is great.

This is the CSS for the forum icons which I wrote for my mobile theme :

Code:

/* LINK ARROW ( FAR RIGHT ) */
.mobile_item_link_content {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/chevro10.png');
  background-position:99% 50%;
}

/* CATEGORY NEW AND NO NEW */
.cat_no_new, .cat_new {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/folder10.png');
}

/* FORUM, FOLDER, HOT  */
.forum_no_new, .forum_new, .folder_new, .folder_no_new, .folder_hot, .folder_hot_new {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/no-new10.png');
}

/* LOCKED */
.cat_locked, .forum_locked, .folder_locked, .folder_locked_new {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/locked10.png');
}

/* GLOBAL */
.folder_global, .folder_global_new, .folder_announce, .folder_announce_new {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/announ10.png');
}

/* STICKY */
.folder_sticky, .folder_sticky_new {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/pinned10.png');
}

It combines both the new and no new icons, so you might want one that's a bit more extended like the one below which includes a rule for each individual icon.

Code:

/* ARROW ( FAR RIGHT ) */
.mobile_item_link_content {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/chevro10.png');
  background-position:99% 50%;
}


/* CATEGORY */
.cat_no_new {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/folder10.png');
}
 
.cat_new {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/folder10.png');
}


/* FORUM */
.forum_no_new {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/no-new10.png');
}

.forum_new {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/no-new10.png');
}


/* FOLDER */
.folder_new {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/no-new10.png');
}

.folder_no_new {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/no-new10.png');
}


/* HOT */
.folder_hot {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/no-new10.png');
}

.folder_hot_new {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/no-new10.png');
}

/* LOCKED */
.cat_locked {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/locked10.png');
}

.forum_locked {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/locked10.png');
}

.folder_locked {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/locked10.png');
}

.folder_locked_new {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/locked10.png');
}

/* GLOBAL */
.folder_global {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/announ10.png');
}

.folder_global_new {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/announ10.png');
}

.folder_announce {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/announ10.png');
}

.folder_announce_new {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/announ10.png');
}

/* STICKY */
.folder_sticky {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/pinned10.png');
}

.folder_sticky_new {
  background-image:url('http://i18.servimg.com/u/f18/18/21/41/30/pinned10.png');
}

All you need to do is replace the image URLs with the ones you want to display. It should be easy to tell which one does want by looking at the comments or the class name. New post icons are denoted by "new" and regular ones either lack "new" or contain "no_new" in the class.


Lastly, to change the background color of the category rows, you can use these two rules. First one for default, and second one for hover.

Code:

.mobile_item {
  background:#FDF;
}

.mobile_item:hover {
  background:#FEF;
}

Don't worry about it, that's why I'm here.

Thank you, you have been very helpful and patient whilst I asked lots of questions.

Thanks again, I'm sure I will be back with more questions in the future when I get stuck again