Styling text in per page extra widget

[canoot65]

Although I have done it before – with your help – I can’t figure out how to style the text and background in a per page extra widget.

The page where it has been done before is here: http://www.nordoy.net/oyablikk-fotoalbum/
And the page where I need it is here: http://www.nordoy.net/folkeliv/

I’m sure there is some CSS code that will do it and I hope you will help me out.

Knut

[Weaver]

You have the earlier page done using Custom CSS, it appears.

I’m not sure of all the styling, but the previous site had:

#text-13 {background-color:#404340;color:#EDEDED;font-size:14px;margin-top:7px;} /* CSS rules for farge og avstand på top widget på fotoalbum*/
#text-13 a {color:#EDEDED;} /* CSS rule for farge på linka tekst på oyablikk-fotoalbum (i widget)*/
#text-13 a:hover {color:#ff6363;} /* CSS rule for mus-over farge på linka tekst (i widget)*/

On the new page, the text widget is “text-16” instead of “text-13”. Start with that. But there are other pages specific custom rules to, and you may need to duplicate theme for the specific new page, too.

[canoot65]

Yes, that solved it!

I suspected that it might be as simple as using the code on the other page and change the number, but I had no clue what number to use.
So, in case I need to use this code on another page, how/where do I find the correct number?

Thanks a lot for your help!

[scrambler]

You have to inspect your page with your browser developer tools to find the ID of the Widget.

If you are not familiar with the browser developer tool, read the thread below.

http://forum.weavertheme.com/discussion/1207/basic-tips-on-using-the-developer-tools-like-firebug-to-resolve-styling-issues

[canoot65]

This was new to me. Thank you!

[Weaver]

Or, if you are comfortable reading HTML source, you can look at the page HTML output directly (right-click, show page source on most browsers) and find the content to get the specific ID of the widget.

It really depends on how well you can read HTML directly. I personally usually just read the HTML, and don’t use the developer tools. The developer tools have the advantage of providing a much more structured layout and check-box display of attributes.

But if you know HTML pretty well, it can be quicker just to look at that code directly.

[Author]

Posts