Latest premium theme for Vanilla forums: Nexus!

alishachris

hello @jspautsch i have tried all of the color themes but none seem to fit well to my reading. i want to the heading to remain green as it is on the NEXUS custom theme, but i would want the body to be lighter and the text/characters to be darker just as they are on this discussion forum so that readability would be enhanced.

alishachris

@Deprecatedz @R_J @whu606 i downloaded cssedit and tried editing the theme, but most of the core changes i need won't budge. the theme is somewhat complicated. like if you change background color, it changes everything on the website. how can i retain the color of just the header?

Deprecatedz

@alishachris said:
Deprecatedz R_J whu606 i downloaded cssedit and tried editing the theme, but most of the core changes i need won't budge. the theme is somewhat complicated. like if you change background color, it changes everything on the website. how can i retain the color of just the header?

You should look into css classes, if is not there a more specific container to change things as you are looking for, simply make it <div class="container(x)"> and add to it some stylish.

R_J

Don't edit any html! That isn't needed. As whu606 said, use web inspector, firebug or however that is called in your browser. Most browsers offer an "Inspect element" menu entry in the context menu when you click on any element in your browser. If you want to change the look of your theme, that is the best thing to start.

whu606

@alishachris

Keep going with this; what you learn from it will help you to understand how to make pretty much any other changes you want.

Lots of people could give you the direct answer, but then you might not really understand why it was the answer.

Let's try to talk you through the web inspector.

Which browser do you use?

x00

@alishachris said:
hello jspautsch i have tried all of the color themes but none seem to fit well to my reading. i want to the heading to remain green as it is on the NEXUS custom theme, but i would want the body to be lighter and the text/characters to be darker just as they are on this discussion forum so that readability would be enhanced.

You might semi-opacity to make discussion/message list lighter on a bright design

.DataList, .MessageList {
     background-color: rgba(255,255,255,0.4)!important; 
}

x00

Or even #Content

alishachris

@whu606 i use firefox by mozilla

whu606

@alishachris

Excellent (so do I...)

Download the Firebug plugin for Firefox here:

https://addons.mozilla.org/en-US/firefox/addon/firebug/

Once you have it installed in your browser, you simply right click on the part of the page you are interested in, and choose Inspect Element with Firebug from the context menu

Move your mouse in the left hand panel,

As your roll your mouse over divs/spans/ids etc you will see the part of the page they effect highlighted.

This can help you to narrow down what you need to change.

Clicking on a div/span etc in the left panel should bring up the rules applied to it in the right hand panel.

Have a play, and let us know what you find.

alishachris

thanks so much @whu606 i have learnt how to change just the header color. My problem now is how to change the text colors both on the frontpage and in the discussion page.

i tried using firebug but i still cant make out the elements.

whu606

@alishachris

Well done for getting so far!

If you can, post a screenshot of what you want and a link to your site.

Sometimes you have to add

!important

to the end of a rule to give it priority.

color: red !important;

You can affect specific parts of the forum by appending the page name to the rule

.Discussion
.Discussions
.Profile

and so on.

alishachris

hello @whu606 so sorry for late reply. if you look at the attached picture, i want to change the color of the texts that those arrows are pointing. Please can you help me figure those out?

you can view the website www.naijapips.com and maybe use inspector to find out the elements.

I really appreciate all your correspondence. You rock, man.

whu606

@alishachris

If you inspect the Front Page element, it shows that you have this rule in your custom.css at line 853

.Discussions .DataList .Item .Title a, .Categories .DataList .Item .Title a, .Search .DataList .Item .Title, .DataList .Users > a, .DataTable a.Title {
    color: #ffffff;
}

so you would change the color hex to whatever you want.

For the Categories box, you need to add !important at line 383

#Panel .FilterMenu li a, .PanelInfo li a {
    color: #ff0 !important;
    font-weight: bold;
    text-transform: uppercase;
}

x00

use !important sparingly if you can. I was lazy in giving you a gerneral answer.

whu606

@x00

In Firebug, for categories, the rule was being over-written, and would only apply with !important.

x00

@whu606 said:
x00

In Firebug, for categories, the rule was being over-written, and would only apply with !important.

http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

alishachris

@whu606 it worked like magic. You are truely a superhero...lol. Only thing now it that not all the colors agreed to change. traces of the old color still remain in some spots and i do not know how to remove them as the inspector cannot define them.

Please look at the spots the arrows are pointing How do i remove the colors?

Thanks.

x00

@alishachris it take time to style, realistically you should learn about how to style with and use inspect. Then you won't have to ask these sorts of questions.

alishachris

@whu606 solved. used #frame.

@x00 whu606 just taught me the basics and i am really grateful. i think i know basic styling now. thanks all the same.

whu606

@alishachris

Well done for sticking with it

Because you persevered, you are now in a position to help yourself (and others!)