allow widgets and widget containers to have a class or id

soaringeagle
@soaringeagle
8 years ago
3,304 posts
situation: you have .item styled a certain way
but want to use a widget without widget title as a page h1 heading with a diferent style then the widget item
now you have to use something along the lines of this
#widget_id-188 .item, #widget_id-165 .item,#widget_id-173 .item,#widget_id-171 .item,#widget_id-166 .item,#widget_id-167 .item,#widget_id-170 .item,#widget_id-169 .item,#widget_id-168 .item {-webkit-border-radius: 2em;-moz-border-radius: 2em;border-radius: 2em;}

when instead you should be able to give the widget id a class like .page_h1
then use .page_h1 {-webkit-border-radius: 2em;-moz-border-radius: 2em;border-radius: 2em;}
to style every widget that you assigned that class to



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

updated by @soaringeagle: 03/07/17 03:23:01AM
brian
@brian
8 years ago
10,148 posts
No - you do not need to setup CSS like that based on specific IDS. Each widget has a set of special widget classes that make it easy to target JUST the widget title - i.e.

.sb-widget-title h2 {
    font-weigh: bold;
}

If course if you need to target a SPECIFIC widget, then use the ID like you have shown, but I would not recommend doing that. Being uniform in how you display elements on a page is an important part of UI design.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
soaringeagle
@soaringeagle
8 years ago
3,304 posts
i dont want to use the widget title which is an h2 instead i want a titleless widget with an h1 tag in the html
do you see what i mean
otherwise theres no h1 tags on sb created pages at all
so i create an h1 tag but it takes the styling of the item its contained in which i want to override with the style for the title

specificly the widget heading has a border radius 0f 2em 2em 0 0 while item has 0 0 2em 2em so they match up but when i skip the widget title it has a flat top round bottom i want to override that with all corners rounded
if i did the oposite thered be rounded tops flat bottom and an h2 not h1 tag for widget title


--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities
soaringeagle
@soaringeagle
8 years ago
3,304 posts
thats why i liked alot of things about the old sb better


--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities
brian
@brian
8 years ago
10,148 posts
You can modify the templates in Site Builder to suit your needs - everything that is displayed in SB has a template, so you should be able to tweak it however you want.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
soaringeagle
@soaringeagle
8 years ago
3,304 posts
i just think it wuld be convineint to be able to add a class to a widget so you can set the widget styling for all widgets of that class ..just consider it for a future release..no hurry i hope others would see the benifit in it too


--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities
brian
@brian
8 years ago
10,148 posts
I just explained how you can add your own widget class. Modify the following template:

page_row_column.tpl

as that is the template for individual widgets. Go crazy. Add whatever classes you want. If you need to target a SPECIFIC widget, then use the classes like you outlined above.

Everything is there for you to set it up however you like.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
soaringeagle
@soaringeagle
8 years ago
3,304 posts
it is targetting specific widgets but instead of targetting 20 diferent widgets as i did above if you could assign a class to those specific widgets and another class to other widgets etc it just makes it easier and more convenient to write 1 peice of css then add the class to any and all wdgets you want to use that styling that way you can easily style multiple widgets the same way by just adding a class or selecting 1 from a list you already added


--
soaringeagle
head dreadhead at dreadlocks site
glider pilot student and member/volunteer coordinator with freedoms wings international soaring for people with disabilities
michael
@michael
8 years ago
7,715 posts
Its on our TODO list.
soaringeagle
@soaringeagle
8 years ago
3,304 posts
thnx michael
i figured it would be helpful to others
but not a high priority thing


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

Tags