The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Including colour into mobile template

4 posters

Go down

Solved Including colour into mobile template

Post by Leah Sweeney August 4th 2015, 5:22 pm

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.
Leah Sweeney
Leah Sweeney
New Member

Posts : 21
Reputation : 1
Language : English

http://studenthva.co.uk

Back to top Go down

Solved Re: Including colour into mobile template

Post by SLGray August 4th 2015, 8:22 pm



Including colour into mobile template Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51408
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Including colour into mobile template

Post by Leah Sweeney August 4th 2015, 9:16 pm

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
Leah Sweeney
Leah Sweeney
New Member

Posts : 21
Reputation : 1
Language : English

http://studenthva.co.uk

Back to top Go down

Solved Re: Including colour into mobile template

Post by Ange Tuteur August 4th 2015, 10:51 pm

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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Including colour into mobile template

Post by Leah Sweeney August 5th 2015, 8:31 am

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
Leah Sweeney
Leah Sweeney
New Member

Posts : 21
Reputation : 1
Language : English

http://studenthva.co.uk

Back to top Go down

Solved Re: Including colour into mobile template

Post by Ange Tuteur August 5th 2015, 10:30 am

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 )
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Including colour into mobile template

Post by Leah Sweeney August 5th 2015, 7:52 pm

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.
Leah Sweeney
Leah Sweeney
New Member

Posts : 21
Reputation : 1
Language : English

http://studenthva.co.uk

Back to top Go down

Solved Re: Including colour into mobile template

Post by Ange Tuteur August 5th 2015, 8:41 pm

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. Smile
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Including colour into mobile template

Post by Leah Sweeney August 5th 2015, 10:30 pm

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 scratch
Leah Sweeney
Leah Sweeney
New Member

Posts : 21
Reputation : 1
Language : English

http://studenthva.co.uk

Back to top Go down

Solved Re: Including colour into mobile template

Post by Ape August 5th 2015, 11:47 pm

Topic solved and archived


Including colour into mobile template Left1212Including colour into mobile template Center11Including colour into mobile template Right112
Including colour into mobile template Ape_b110
Including colour into mobile template Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19206
Reputation : 2001
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum