acub

Copy customizr/inc/admin/class-admin-customize.php to [your-child-theme-folder]/inc/admin/class-admin-customize.php and change ‘edit_theme_options’ to ‘update_core’ on line 74 (in 3.0.9 – might be different in later versions).

I’m assuming you haven’t given your editors the right to update WP.

Alternatively, you could use the code provided above by rdellconsulting. All you have to do is input it in the Custom CSS panel of Customiz’it!

However, that solution has two minor disadvantages:
1. The button is still there. A technical savvy editor who would look at page elements with a web-dev tool would be able to find and display it.
2. It will hide the buttons for all roles, including admins.

The display of those buttons is hooked to the “edit_theme_options” capability (in inc/admin/class-admin-customize.php).

So the buttons will only show up to admins and super-admins, who can get to theme options pages anyway, so the buttons are useful, while they won’t show up for levels below admin, unless you’ve given them the “edit_theme_options” capability, in which case the buttons are useful.

There is a solution that (i think) would look decent on pages with background image.

1. Change icon clipping from circle to square with

.round-div {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}

2. Set the .round-div border-color to something semi-transparent using rgba(). Example (white 50%):

.round-div {border-color: rgba(255, 255, 255, .5);}

3. Change the proportions of featured pages icons to squares (you don’t really have to do this, but I think this solution would look better with square images): 250×250 or 270×270. You might find in theme FAQ a topic on changing icon’s sizes and you will also have to tweak a bit with .thumb-wrapper dimensions on different widths to make it look right.

Alternatively, if you don’t feel like doing that, you could hide the non-square icons imperfections (visible on hover) by altering the scale factor of .round-div on hover:

.widget-front.hover .round-div, article.hover .round-div {
-webkit-transform: scale(1.65);
-moz-transform: scale(1.65);
-ms-transform: scale(1.65);
-o-transform: scale(1.65);
transform: scale(1.65);
}

@baars.jan: If you use ImTheirWebGuy’s solution from the topic posted above by rdellconsulting you’ll have parent links on click for wide screens and submenus on click for narrow screens.

However, you do lose the parent links on narrow screens. I’ll try to develop a solution for this using arrow icon links instead of :after’s to open the submenu and keeping the parent links, but that’s not likely to happen in the next two weeks, I’m quite work overloaded at the moment.

On further testing and using this code, I have noticed that the information I have provided above is not 100% correct. The “left: 0;” is necessary for the fading effect to work, and also, the syntax of the transition property is not right, according to W3C. Correct code for the transition shorthand is: property duration timing-function delay. This might matter in some versions of some browsers. Also, apart from Safari, all other browsers are offering support for transition property, so the -moz, -ms and -o are not needed.

The correct code, working on all devices in all browsers (afaik) is:

.carousel-inner > .item {
-webkit-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  opacity: 1;
  z-index: 1;
  left: 0;
}
.carousel-inner > .active.left {
  opacity: 0;
  z-index: 2;
  left: 0;
}
.carousel-inner > .active.right {
  opacity: 0;
  z-index: 2;
  left: 0;
}

@Killasona: please try this new code, it might solve your problem, in which case it was a CSS syntax error, and not a js interference from some plugin. Change the duration and transition-function to your liking (for example, i’m using 1.2s duration and ease effect).

The squares that you see are actually the icon’s borders. If you make them transparent, the zoom-in/out effect disappears. Instead, you have to make the border the exact color of your page background.

You need to add this code in the Custom CSS panel:

.round-div {border-color: white;}

but replace “white” with whatever color code your page has as background.
If you don’t care about the circles effect replace “white” with “transparent”.

Afaik, resizable backgrounds are not possible through CSS. A workaround would be to place img tags behind the content and resize them relative to the page width, using javascript, but that’s far beyond the scope of this forum.

If you change the image with an editor it won’t cover 100% of other screens. In your case I’d say a width of about 800px would look decent on all resolutions, cropped on small screens and covering content width on larger ones.

As a sidenote, your backgrounds would look better if you replaced the white part with transparency using a photo editor and saved them as png’s.