Page/Widget Header Text and Fonts

Jordan
Jordan
@jordan
7 years ago
24 posts
Is it possible to change the widget title text color?
Are their more fonts available for use with any of the widgets or is there a template I should be looking at for these changes?

updated by @jordan: 12/25/17 10:19:12AM
michael
@michael
7 years ago
7,694 posts
The Site Builder system has no styling system built in at all, all the style comes from the skin.

From the skin you can access all your CSS files and they can customize anything including Site Builder in any way you like.

Each widget has classes and an ID on them so you can target all titles, or just titles for specific widgets.

So to target a title, you could use the CSS:
.sb-widget-block .title {
// ... css goes in here
}

or
.sb-widget-title {
// ... css goes in here
}

Or use the ID of the widget block if you want to target just one specific widget:

#c67 .sb-widget-title {
// ... css goes in here
}
soaringeagle
@soaringeagle
7 years ago
3,304 posts
id recommend you learn some css its really not hard, that combined with simple template edits and you can even alow your members to set the colors of their names on their profile pages.

you can use the form designer to add stuff like profile_name_color and use the color picker tool to select a color
then tame that colr value and add it to inline css

i had posdted a tip somewhere in the ning forum i think (if that still exists) expolaining how to add a profile header cover image change the name color and the heading background color , for starters.
from there you can build in even more control if you want.

css can be edited in the skin styles thing but i find that extremely limiting so actually never used it
instead in templates if i wanted to targed a certain .item like the 1st .item in a forum post i can in that template add a second class or a id (when you learn css basics (again pretty simple) you'll know which to use. now in the skins css files you just use that new class or id to apply custyom styling to that item that through the skin style editor is innaccessible

between css template editing and the form editoir you have pretty much complete control and can give users controlk over the look of their own content
it would be ugly and silly but youi could even let users have custom background colors (ort even imagtes) for their forum posts.


learn to usefirefiox's plugin firebug!
if you want toi change the color of an item, simply right click it view element in firebug then you can play with the colors live (you see what you change others don't0 then when happy right click copy the code and paste into the end of your css file
firebug can teach you many css basics by simply using it
thats how i taught myself everything but css animation

as fotr fonts css uses font families. since not everyone hasd every font installed on their system you choose a font family and if a fonts not installed another from the same family gets used.
you can specify both a font and font family i believe and then if the 1 you specify is not inbstaled anopther from the samne family gets used.

if a specific font is essential i believe they can be downloaded and loasded with the page with link statementrs that load the font files before page rendering


--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities
Jordan
Jordan
@jordan
7 years ago
24 posts
Thanks for your help! Guess at this point I'm forced to learn html and css...which i was really trying to avoid. I would appreciate a a good learning guide, study or tutorial...any recommendations?
soaringeagle
@soaringeagle
7 years ago
3,304 posts
honnestly i learned by doing. well html is fairly simple or was when i 1st taught myself (its evolved a lil since then) css i'm not sure even existed when i learned html
css you can learn by using firebug selecting elements (divs images whatever) you can 'cycle through' options using just the up and down arrows and see the results.
theres a site i foirget what its called webmonkey/ codemonkey? havent looked at it in a decade or more that has basic tutorials. both are easy to learn, css slightly trickier to learn as you do simply because of the nested structure of html, finding the right element to change its attributes on might be tricky at 1st) example display:none or any other display option can be used on the containing div or the img tag within it
its very powerful yet pretty simple

above you were offered code that would change an elements state when used in a style, all you need to do to learn it is look at it and see why it does what it does
he gave you 3 ways to target the element 'title"
then you can have in the css goes here area font-color:red; font-size:bigger; or font-color:#fe1000; font-size:2em; for more exact control
its pretty simple to see these set the font color and sizes
only a handful are not that self explanitory


--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities
Jordan
Jordan
@jordan
7 years ago
24 posts
I got ya... I tried the trial by error thing for a while to see results of changes and although it helped a little it was way to time consuming. I do appreciate your responses though...so thank you ...I found a site from my first search that looks like it might have some good basics training here: https://learn.shayhowe.com/html-css/ Hopefully it helps others as well.....

Thanks for your help
soaringeagle
@soaringeagle
7 years ago
3,304 posts
it gets easy once you learn the basics
but the more powerful stuff does take a lil research


--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities

Tags