CSS for image margin/padding in 'sitetopic' section of Front Page

CSS for image margin/padding in 'sitetopic' section of Front Page

by Matt Lockey -
Number of replies: 4

I've created a theme and have a number of 'tiles' representing course categories on the front page. These images are within the 'Summary of Site' section of the Front page, specifically within the 'sitetopic' CSS class. I want these images to have a 5px spacing and thought this would be a simple task through one of the style sheets in my custom theme, however I can't get anything to work. I've tried the following but no joy, the spacing remains the same.

.sitetopic img {
  margin-right: 5px;
  margin-left: 5px;
}

I can't use a label on the front page or a number of reasons, so whatever solution I come up with has to sit within the sitetopic CSS class.

Any help would be appreciated!

Average of ratings: -
In reply to Matt Lockey

Re: CSS for image margin/padding in 'sitetopic' section of Front Page

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Matt,

I suggest that you use browser development tools, such as https://developers.google.com/chrome-developer-tools/ to see if your styles are being overridden and need to be defined later on.  Or that the margin is having no effect and in fact you need to use padding instead: http://www.w3schools.com/css/css_boxmodel.asp.

Cheers,

Gareth

Average of ratings: -
In reply to Matt Lockey

Re: CSS for image margin/padding in 'sitetopic' section of Front Page

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Hi Matt

What theme are you using as your starting point?

I just tried this on Formal White and Clean, by adding your css into the customcss box on each of those themes and it worked fine.

Have the images had margins set in the image upload dialogue? if they have, this becomes inline element css and overrides what is set in the CSS files.

Firebug and Chrome Developer tools are useful when identifying the css and where it is coming from or being overwritten.

Average of ratings: -
In reply to Matt Lockey

Re: CSS for image margin/padding in 'sitetopic' section of Front Page

by Mary Evans -

Hi,

Try adding..

#page-site-index .sitetopic img { margin: 0 5px; }

see if that helps?

Mind you knowing what the HTML for the images you added would be helpful.

Also depending on where you added the CSS is also helpful too, as you may be missing a setting or two especially if you have created a new theme. Also have you enable Theme Designer Mode.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: CSS for image margin/padding in 'sitetopic' section of Front Page

by Matt Lockey -

Well now don't I feel stupid. Theme Designer Mode enabled and everything works perfectly.

Thanks Mary - you're a star!

Average of ratings: -