Edit Page Buttons

Permalink
I am having an odd problem with the edit page buttons. In the default themes they work fine, however when I am using a custom theme the left side of the buttons disappears, it appears when you mouse over the button. It is purely cosmetic/css or something, but I can't seem to figure it out, anyone else experience this? Here is a screen shot of what I mean.

1 Attachment

ericb
 
liberalmark replied on at Permalink Reply
liberalmark
This one has bothered me since day one using C5. I'm about as seasoned as you can get with CSS, yet no modification I've made to the source files fixes this. Everything logical fails.

I know it's only cosmetic, but it's a drag to explain to clients that I can't do anything to make the buttons whole.

The only explanation I can assume, is that C5 is allowing something in custom-theme CSS to override its own CSS, thus breaking those buttons' appearance.

C5: any thoughts on this?
frz replied on at Permalink Reply
frz
What browser you guys on? I've never seen this.
liberalmark replied on at Permalink Reply 1 Attachment
liberalmark
I test sites in 22 browsers on 4 platforms. It's the same in every one.
frz replied on at Permalink Reply
frz
okay thats just odd.. so if this isn't something we can blame on microsoft, i guess we need to look at the themes... are you saying you've built a custom theme that does this, or one of the custom themes you're downloading from our marketplace does this..

can we see that code, or a URL to the site?
liberalmark replied on at Permalink Reply
liberalmark
My theme is completely custom. I've only used C5 on one live site so far. The others are in development and I can't yet share them. The URL for the live site is here:

http://www.walkermacy.com/

(I didn't design this site, by the way. We just recoded an existing website from scratch for SEO/CMS purposes.)

Obviously something in the theme's CSS is overriding the system's CSS. I don't know how that would happen, but it appears to be so. If I swap out the theme on this site (in a local development server) with one of your default themes, the buttons are fine. Thus my conclusion that C5 is allowing the theme's CSS to override the system's CSS.
frz replied on at Permalink Reply
frz
c5 can't "allow" css to do one thing or another.. we can continue to try to force strict classes on things but i think it's always going to be possible to tweak your css in a theme and have an impact on the editing experience...

that being said, i'm sure there's something simple in your css that could be renamed to cause buttons to not look this way, maybe someone can dig it up..
bcarone replied on at Permalink Reply
bcarone
I was just wondering if you had set some of the pixel widths to a new setting. I haven't tried setting a template to smaller than the original designed templates only bigger.

I know that is a simple thing, but it could be what has happened.

-Bill
wltr replied on at Permalink Reply
wltr
Your custom css files are loaded after the c5 css file. c5 cannot help if you overwrite css rules.

But in your theme, you could try to put
<?php Loader::element('header_required'); ?>
after your css files links (probably in themes/walker-macy/elements/header.php).
liberalmark replied on at Permalink Reply
liberalmark
I realized that my type selectors for the "a" tag are overriding the C5 CSS for those buttons. This makes sense and is something I blindly failed to consider because C5 runs its editor buttons and the site concurrently. I can convert those to ID selectors and the problem will subside. Though I'll first try to load the C5 header after the CSS calls so I don't have to change any CSS.

Thanks, all.
ericb replied on at Permalink Reply
ericb
Switching the load of the header worked for me thanks! It seems having the global selector a:link with background:transparent was my culprit in case anyone else encounters this. Thanks for the quick response people, c5 and the community here are both pretty awesome.