Topic: 1.5 BP Default Themes styles leak into custom theme ?

1.5 BP Default Themes styles leak into custom theme ?

@valuser

Participant

13 years, 3 months ago

Currently experimenting with 1.5 r trunk 5157 (WP 3.2.1) with a third party theme modified with the BP Template Pack from https://github.com/boonebgorges/bp-template-pack on a local install.

Have transferred a good lot of the bp default theme to this theme and have changed a few things – mainly colors of buttons etc

All well, except one tiny item. ( In fact 1.5 is really great )

The sites theme is ignored and the colors of the bp default theme are implemented.

(I think) I see this when I examine the code in Web Inspector in Safari.

I can easily correct this by putting !important after each color and so this is not really a problem.

Thought I’d report it anyway. and thanks .

Viewing 12 replies - 1 through 12 (of 12 total)

@boonebgorges

Keymaster

13 years, 3 months ago

Are you sure that the styles are coming from bp-default, and not from the bp-template-pack CSS? (It would be very strange indeed if it came from bp-default, unless of course your theme is a child theme of bp-default, in which case you don’t need the Template Pack.)

@valuser

Participant

13 years, 3 months ago

third party theme techozoic-fluid
took out the !important s and empty cache reloaded page

the button color is now gone back and appears to be taking the color from bp.css: 653 as per Web inspector
my import style at :8888/chatty/?techozoic_css=css:1921 is crossed out in Web inspector. Please don’t do this on my say so as i can revert with !important .
button,
will be back tomorrow.

@boonebgorges

Keymaster

13 years, 3 months ago

It probably means that the stylesheet for bp-template-pack is being loaded after your custom styles. For now, either use !important, or just use a more specific selector. I’ll open a ticket on Github to see if there’s a more general solution.

@r-a-y

Keymaster

13 years, 3 months ago

The BP Template Pack styles are being a little greedy. I’ll take a look at this in the next day or so with the Technozoic theme.

Keep your eye on:
https://github.com/boonebgorges/bp-template-pack/issues/7

@modemlooper

Moderator

13 years, 3 months ago

I think this is the same problem I’ve been having with WP enqueue. Updates to a style sheet that is enqueue don’t show because of cache.

Better to use WP head for custom CSS

@djpaul

Keymaster

13 years, 3 months ago

Modemlooper, I disagree. The $ver argument for wp_enqueue_script() is what you need to increment when you update an enqueued javascript/css. 1.5 does this, as does WP core.

@modemlooper

Moderator

13 years, 3 months ago

Paul, I agree but when you are designing and have to increment with each and every change it is a PITA.

@valuser

Participant

13 years, 3 months ago

put the test site online at http://ruby.de-nws.com/susanx/ get in with usr joly and pw joly

see http://ruby.de-nws.com/susanx/activity/ etc

have taken away the !important at
button,
a.button,
input[type=submit],
input[type=button],
input[type=reset],

and the subsequent hover button.

So the changes to color ie #A4C2DD and hover color #397193 are not coming through in the buttons.
put !important back and the colors come back.

just one thing. I would have done the compatability folder thing on or about sept 5th so subsequent changes to that element may not be incorporated. Also did the 13 file changes rather than the new way.

@karmatosed

Moderator

13 years, 3 months ago

@valuser: Are you enqueuing your CSS for the custom styles you’ve done. To me it looks like you aren’t. There are 2 things at play here:

1. You need to now enqueue any styles keeping order ie; last style you want enqueue that last

2. !important is a little like a kid sticking their hand up in class it will get paid attention to above all else – therefore yes adding !important does work but shouldn’t be what you use you should use the ‘cascading’ nature of CSS.

@boonebgorges

Keymaster

13 years, 3 months ago

Just to be clear, bp-default has been fixed to do automatically what @karmatosed suggests you do manually. This is only an issue for the BP Template Pack.

In the meantime, why not just use more specific selectors?
`body button
body a.button`
etc. The ‘body’ bit essentially does nothing in terms of which element gets selected, but it forces the browser to give your rules priority because they are formally more specific than those in bp.css. Maybe not the most elegant solution, but better than using `!important`

@valuser

Participant

13 years, 3 months ago

Just to note this is NOTin any way urgent for me.

and that inserting

body button,
body a.button {
color: #A4C2DD;
}

body a.button:hover {
color: #397193;
}

does the trick. Many thanks for the months of work on 1.5

@boonebgorges

Keymaster

13 years, 3 months ago

@valuser Thanks for your patience, and for the kind words