The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Including colour into mobile template

View previous topic View next topic Go down

Solved Including colour into mobile template

Post by Leah Sweeney on 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
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 on August 4th 2015, 8:22 pm



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


SLGray
Administrator
Administrator

Male Posts : 36659
Reputation : 2444
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Including colour into mobile template

Post by Leah Sweeney on 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
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 on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Including colour into mobile template

Post by Leah Sweeney on 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
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 on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Including colour into mobile template

Post by Leah Sweeney on 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
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 on 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
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Including colour into mobile template

Post by Leah Sweeney on 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
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 on August 5th 2015, 11:47 pm

Topic solved and archived




APE
Manager
Manager

Male Posts : 8615
Reputation : 748
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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

Back to top Go down

View previous topic View next topic Back to top


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