Remove theme builder styling on elements

Hi cosy,

Right now it's not possible to entirely remove saved changes made through ThemeBuilder in a theme, but this is one of our next major features. In the meantime, if you can point me to an element or area you'd like to adjust, we can find the adjustments or CSS needed to make it work as you'd like.

I have another take on this (just in case your answer is different!).

Is it possible to get a report of all the changes I've made to a DG theme via the Theme Builder?

Why? Because I'm now finding it easier to add things to the Advanced CSS - I can see what I've done, and it's quicker to change. So if I could see what I've done via Theme Builder I could collate all my changes under the Advanced tab.

Griff

Hi Griff,

The new feature will do just this, in addition to letting you toggle those changes on and off or delete them.

In the meantime, if you go to Configuration > Performance and turn off CSS Aggregation, all the changes you've made through the ThemeBuilder controls will be visible in the custom.css file.

Hi George,

Hmmm. Tried that but the CSS in the Advanced tab is the same. I wonder what I'm missing? Does it maybe only work for changes I make from this point forward?

Griff

Ah, it won't change the code available in the Advanced tab, but you could inspect the custom.css file from the page source to track down whatever declaration you'd like to override using the Advanced tab. The CSS defined in the tab is loaded after the styles defined through the TB tools, so it can be overridden in most cases by just copying the declarations and changing the properties.

Ah, ok. Now I understand. I'll do that.

Thanks, George.

Griff

Sorry for delayed reply to thread george.

Ive started working my through the navigation and have got it as far as i can, but i have made so many using themebuilder that i can no longer recall which ones may be causing so much havoc!

its nearly there i think but there are a few issues still that i just cant find using firebug.

the top level ul li elements seem to be order finally but they seems to have inmposed certain stylings on the expanded lists too., working with:

http://schooloffurniture.drupalgardens.com/professional/antique-restoration

1) The expanded list looks almost ok, except the top item is thinner than the rest, possibly because the the padding around the text ,part of ul li, is applied the entire expanded part?(guess)

as a result theres no padding below item 1 'poxy table'  additionally the items below lack a border split.

2)also, the expanded ul li item 'antique restoration' has lost its padding and the a link now bleeds into the child list.

3)The biggest issue that just cant get my head around, when you hover over the expanded ul li or any of its child elements, ive managed to get the hovered elements working correctly, but all the other child elemts have their text coloured yellow.

ive tried selecting a million combinations of ul li ul li a ,with various combinations of :hover to no avail and im lost as to what is causing this styling.

(addionally to this, for future ref: Im confused as to how one uses themebuilder to select ul li ul li a for instance, i would have thought selecting ul li ul li and then clicking the child arrow would do this but just end up with ul li a.)

i think reswolving these issues would fix the entire menu. as general overview the un expanded top list items are a good reference for size and colour format.

Looking forward to building the menu for the student portfolio and hoping it will take its styling from this one because i definatly wont remember the correct values for it!

cheers

'as a result theres no padding below item 1 'poxy table'  additionally the items below lack a border split.'

seem to have resolved the border issue

and also made the top item the correct thickness.

pure random fluke of course. and im often finding that theme builder doesnt report correctly certain values,

i.e the getting border correct, meant that the top item, which already had a border became 2px thick,

i was able to select #sidebar-a .first ul .first, which reported 0 border, but then using the slider, up and then back down to 0, resolved the issue and set the border to 0; as far as i can see, i had not set the border to this in my css.

As far as i can see, the only 2 issues are the hover state and the fact that the open ul li item is lacking the padding to hold its text, which is bleeding into the child list

with regard to the thin expanded list item:
it seems that #sidebar-a ul .expanded givewn padding of 3 on top and bottom as per usual list items adds the padding to the bottom of the list, since the child list within is part of the ul li item.

i remove the padding to #sidebar-a ul .expanded on the bottom so that the bottom item doesnt appear thick.

but how to add the padding to the bottom of the parent list item?
 

Possibly could we add it to the top child element, nudging it down?!

I would have thought this was messy and silly and following tutorials and other people examples of list stylings i assumed lists were much simpler than this.

hence my original question:

is there a standard procedure for styling lists?

what elements should you start wityh to avoid their properties being passed on to children where you dont want them to to, like the hover state colouring?
 

lost the borders again!

Hi cosy,

I could reset elements of the theme to their defaults if you'd like. If you could grab a couple screenshots and mark them up, I'd be happy to remove some of the current declarations affecting them, which should make re-theming them easier. Jing and Skitch are two free products that make capturing, annotating, and sharing screenshots easy.

yeh, this jing thing is useful. These should say it all much quicker!"

http://screencast.com/t/DAtB2OJnM

http://screencast.com/t/cgEAUZq1oO

http://screencast.com/t/ikLgn9Ow

http://screencast.com/t/e9JVxhWgKk5 (extra quick question!)

hope this is enough information for you

also, in regards to http://schooloffurniture.drupalgardens.com/school/students

, click on a student. each  of them are placed within the book that is 'student portfolio book' as child elements under the parents page 'students'

....i click on a students, but lose my trail in the top/main nav bar.

as far as i know this is the same as ive setup this scenario before but it isnt working./

Hi cosy,

I saved (but did not publish) a new theme called acq_rollback which stripped all the styling off the sidebar.

perfect george.

rebuilding the menu was quick and easy and has helped me understand its elements better.

stuck with the same issue however , i have got this far..

using the themebuilder and some css:

#sidebar-a li ul li:hover {background-color:#543123;}
#sidebar-a li ul li:hover a{color:#fee4aa;}
#sidebar-a li ul li a{font-size:15px;}
#sidebar-a ul li:hover {background-color:#543123;}
 

as i can never seem to access these elements in themebuilder (can you advise on the correct route)

however, the addition of the line:

#sidebar-a ul li:hover a{color:#fee4aa;}

poses me the same exact issue as before, when i hover any of the child nav elements , every elements a link is coloured yellow.

somehow i need to target only the element im hovering over

oh. just talking about it then, made it evident. i used the expression

#sidebar-a ul li:hover a:hover {color:#fee4aa;}

though i did not expect this to work because i thought it would only work when i hovered over the link and not the li itself;.

oh , it does.

but i also used the expression

#sidebar-a ul li:hover a {color:#fee4aa;} aswell and this seems to work.

im assuming this must be standard procedure?

ok, so i do have issues.

using the followig satatements in css:

#sidebar-a li ul li:hover {background-color:#543123;}
#sidebar-a li ul li:hover a{color:#fee4aa;}
#sidebar-a li ul li a{font-size:15px;}
#sidebar-a ul li:hover {background-color:#543123;}
#sidebar-a ul li:hover a:hover {color:#fee4aa;}
/*#sidebar-a ul li:hover a {color:#fee4aa;}*/

i get the result:

http://screencast.com/t/kFAyj4k8rT

and un commenting the last statement /*#sidebar-a ul li:hover a {color:#fee4aa;}*/ in the css

yeilds the result:

http://screencast.com/t/2jyqHVNPEvG

am i too also include statements resembling

#sidebar-a ul li:hover ul li:hover a:hover

which im sure was how i got into this mess in the first place.;

Hi cosy,

I think there's a couple things at play here. One is it will be easier to deal with the backgrounds if you can discount the behavior of the li elements. To do that, we can get rid of all their margins and padding, then display the links within them as blocks. Now we only have to be concerned with the behavior of the links.

Second, hover is an odd state, and it's often helpful to explicitly define behavior for all the link states in a particular order. Please give this a try at the bottom of the Advanced tab:

Not quite the way id like it to work,

but i can understand how the li elements can make it all the more complicated,

The important thing is that the active page is clear so that the viewer knows where they are and i think thats been acheived.

....oh ,it didnt work as expected before but after just using your statements(couple slightly altered) above and then un-commenting some of my originals, it works!

in total the following statements were used

#sidebar-a li ul li:hover {background-color:#543123;}
#sidebar-a li ul li:hover a{color:#fee4aa;}
#sidebar-a ul li:hover {background-color:#543123;}
#sidebar-a ul li:hover a:hover {color:#fee4aa;}

#sidebar-a ul {
  padding-left: 0;
}

#sidebar-a ul.menu {
  border: 1px solid #543123;
}

#sidebar-a ul.menu ul.menu {
  border: none;
}

#sidebar-a ul a {
  display: block;
  padding: 5px;
}

#sidebar-a ul li {
  padding: 0;
  margin-top: 0;
  background-color: #fee4aa;
  border-bottom: 1px solid;
}

#sidebar-a ul li ul li{
  background-color: #fee4aa;
  font-size: 0.65em;
}

#sidebar-a ul li a:link,
#sidebar-a ul li a:visited {
  color: #543123;
}
#sidebar-a ul li a:hover,
#sidebar-a ul li a:active {
 color:#fee4aa
}
#sidebar-a ul li ul li a:link,
#sidebar-a ul li ul li a:visited,
#sidebar-a ul li ul li a:hover,
#sidebar-a ul li ul li a:active {
  color: #543123;
}

Ok, so question no 2

The heading at the top of each page is reffered to in TB as #main h2

i cant use display:none; on this as the smaller headings below it which are part of the view ,i do wish to keep

see scast: http://screencast.com/t/IdvwButp1hHu

can i refer to this element as bit more specifically?

i was hoping to use the page-node or something to be more specific but , the headings on the view are also part of that.

Question 2:
As i explained before ther page http://schooloffurniture.drupalgardens.com/school/students

sucessfullt trails in the top nav,

but inspection of a particular student no longer continues the nav bar trail.

this confusing since the nav bar on the left works fine, on account of fact that each stedent is placed within the book school portfolio book and under the page students.

given the top nav bar 'school portfolio' points to the page students i would have thought the child page under this would also bar highlighted as active under this nav bar element.

Question 3:
Contact form is now created,

http://schooloffurniture.drupalgardens.com/contact#

however as you can see, it is not part of a book and hence lacks the page lines..above and below its title.

can this be part of a book?

if not, is there someway i might seperately define the title element for just the contact form, give it a width the same as the main content, and a top+bottom border so that it resembles the same titling as the other pages nested in a book?

Hi cosy,

Great, glad to hear the menus are working. I should have mentioned the CSS was a replacement, sorry for the confusion.

Could I ask that questions 2 and 3 be made into new, separate posts? That will make it much easier to work through them.

of course george,

i realise this is a forum and it is documented for others help too.

it just felt a little rude creating several posts!

signing out of this one

complete