Image styling and sidebar menu styling - Support | Kriesi.at

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
March 2, 2015 at 12:02 pm #404388

heinrichvk
Participant

Hey!

I have two questions:
1. I would like to add some styling to select images on some pages of the website. Currently, when images are added with the Image element, they have no styling options.

I would like to add a border, padding and shadow using CSS.

Original Screenshot:

Desired Screenshot:

What is the best method to apply the styling to individual images?

2. The sidebar menu has an indent and a small highlight of the current page.

How can is it possible to remove the indent? How can we style the highlight? We would like to keep the modified setting for the whole website.

Regards,
H

March 2, 2015 at 9:54 pm #404793
Elliott
Inactive Moderator
Hey heinrichvk!

1. You could add a class to the image so the code looks something like so.
```
<a href="#"><img src="#" width="300" height="71" class="customClass alignnone size-medium wp-image-63" /></a>
```
And then add this to your custom CSS.
```
.customClass { margin: 10px; border: 1px solid black; box-shadow: 0px 0px 2px black; }
```
2. You can use this CSS to style it.
```
.widget_nav_menu .current_page_item {  }
```
Though I don’t think there is an indent by default. Send us a link to your page and we’ll take a look.

Best regards,
Elliott
March 5, 2015 at 4:47 pm #406503
heinrichvk
Participant
Thank you for the response.

The solution you proposed with the images works well.

It is possible to add such styling to all images that are added to the site with the Image element? I am mostly using the visual editor.

With regards to the menus (sidebar). This is how they currently look:

The current page is in bold, with a slight indent and a grey highlight. How can we remove the indent? Possibly we would want to change the color of the highlight (the grey to a darker shade), how can we do this?
- This reply was modified 9 years, 9 months ago by heinrichvk.
March 5, 2015 at 10:00 pm #406708

Elliott
Inactive Moderator

Hi!

Hmm, I’m not sure. It looks like you have some CSS to align them to the center when they should be aligned to the left by default. Can you send us a link?

Regards,
Elliott

March 6, 2015 at 9:42 am #406884

heinrichvk
Participant

This reply has been marked as private.

March 6, 2015 at 7:13 pm #407227
Elliott
Inactive Moderator
Hey!

Try adding this to your custom CSS.
```
.sidebar_left .widget_nav_menu .current-menu-item a {
  padding-right: 0 !important;
}
.widget_nav_menu .current-menu-item {
  background: none repeat scroll 0 0 #ccc !important;
}
```
As for the image styling see #1 here, https://kriesi.at/support/topic/image-styling-and-sidebar-menu-styling/#post-404793. If you want to target all images on your site then you can do so with this CSS.
```
img {  }
```
But I don’t think that’s what you want to do as it will have weird effects on the theme design. It would be best to use a class as suggested in my first post.

Regards,
Elliott
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.