|
tneumann
|
February 19, 2015 at 8:57 am
RE: The following link: http://www.softlitestudios.com/workshops-grid/
I am using WordPress 4.1.1 and EE4 4.6.10.p. I am using Elegant Themes DIVI 2.0, and have implemented style customizations via a child theme.
I have a primary question, and then a number of additional stylistic “tweaks” I am concerned with. My primary question is, given the link above, I would like to center the grid on the page. At some point I might like to add a sidebar to the page, and I would like to either know that the grid would stay centered in it’s new container, or what changes I would need to potentially make if I add that sidebar to keep it centered. I have tried to address this by inspecting and changing some styles, but I can’t seem to get the right class / id affected.
From a stylistic approach, I would also like to do the following:
A) For each workshop image, I would like to be able to center the hover text, vertically over the image.
B) I would like to add a drop shadow to each image
C) I would like to changing the padding / margins between the images, but when I add padding it adjusts the border around the image, or when I changes margin, I get a black background around the image.
D) I would like some for of title to be displayed over the images, I don’t know if this is a feature of the plugin or not (as I can’t find much in the way of documentation), of if I should just manage this on the page where I am including the shortcode to call the image grid display.
I appreciate your assistance!
Thanks,
Tim
|
|
tneumann
|
February 19, 2015 at 8:58 am
Adding email notification switch here…empty reply…
|
|
tneumann
|
February 19, 2015 at 2:42 pm
Okay well scratch items B and C from my OP…
.ee_grid_box img{
background-color: #333333 ;
border: 2px solid black ;
box-shadow: 10px 10px 25px #000000 ;
}
.ee_grid_box a:link {
margin: 20px 30px 20px 30px ;
}
|
|
tneumann
|
February 19, 2015 at 2:51 pm
Okay scratch item D…added in PageBuilder as a separate row…works fine.
Still need this thing centered though!
Thanks!
|
|
Dean
|
February 20, 2015 at 4:35 am
Hi,
Glad you got most of the things figured out.
I’m assuming with A) that you want it vertically centred rather than horizontally centred (as it seems to be that already)?
Vertical centering is a pain, there are a few ways to do it but they are all situational.
The best I could come up with for this one would be:
.ee_grid_box a { position: relative; }
.ee_grid_box h2 {
position: absolute;
top: 50%;
left: 35%;
height: 30%;
width: 80%;
margin: 10% 0 0 -25%;
}
It’s far from perfect but might at lest get you in the right direction.
That CSS can be added to your themes style.css, though in order to preserve the CSS through theme updates we recommend adding it to either: a child themes style.css, your themes CSS options if it has any, or a plugin such as My Custom CSS.
|
|
tneumann
|
February 20, 2015 at 10:29 am
Hi Dean,
I appreciate your response. I am not looking to center it vertically, I am looking for information on centering it horizontally. It is fairly close now, but that is a result of padding and / or margin that I have modified on the images within the grid. I am really wanting the grid to be centered horizontally on the page.
I do have all of my modifications in a child theme, so I can easily add adjustments there.
Thanks Again!
Tim
|
|
Dean
|
February 23, 2015 at 4:46 am
I see, yeah it looked centred already so it confused me.
If you remove the padding you added, and then add this CSS, it will centre the grid wrapper.
Of course you may want to change with overall width and you may want to add the individual padding back in to space the grid items out a bit more.
div#mainwrapper {
width: 896px; //this is the width of the wrapper change it as necessary
margin: 0 auto;
}
That CSS can be added to your themes style.css, though in order to preserve the CSS through theme updates we recommend adding it to either: a child themes style.css, your themes CSS options if it has any, or a plugin such as My Custom CSS.
|
