Jump to content

WordPress style.css image alignment


Recommended Posts

The site being worked on is here.

The Meteor Slideshow will not center on the page, neither using the Meteor shortcode nor the page alignments nor both.

The text below the slideshow will not wrap correctly around images. Note the third image and see how the text breaks from one line to the next in order to wrap. There should be no line break.

The Important Theme Code shown at http://codex.wordpress.org/Wrapping_Text_Around_Images is suggested to solve these problems. Do you agree? Is there a better way? If I use the code shown, where in the style.css should it be inserted?

Thank you!

Link to comment
Share on other sites

For text wrapping around the images, just copy and paste that css (per that link you've provided) to your theme's style.css file at the end.

 

To center your slide you will need to edit the slideshow's theme's css file. Look for the following:

 

.meteor-slides {

margin: 0;

overflow: hidden;

padding: 0;

position: relative;

z-index: 1;

}

 

Change the margin: 0; to be margin: 0 auto;

 

I hope this helps.

Link to comment
Share on other sites

  • 2 weeks later...

For text wrapping around the images, just copy and paste that css (per that link you've provided) to your theme's style.css file at the end.

 

To center your slide you will need to edit the slideshow's theme's css file. Look for the following:

 

.meteor-slides {

margin: 0;

overflow: hidden;

padding: 0;

position: relative;

z-index: 1;

}

 

Change the margin: 0; to be margin: 0 auto;

i

I hope this helps.

 

 

Regarding the word-wrap code referenced in my original post above, in the Weaver theme when you open style.css in the editor it says not to edit there but to place code in the <HEAD> section of Advanced Options between the <Style> tags. I placed the wrap code there but there is no difference, still no wrap.

 

I did this before on TGS site and had no problem, wraps fine without any code insertions or modifications.

 

Also, on TGS site I can drag the images in content area and the text will adjust, but in Sailing site cannot move the images at all.

 

 

As for the slideshow positioning to be in the center, I could not find the meteor css style sheet. I found in another thread that they solved a positioning problem by dropping the code in the Advanced Options <HEAD> section so I did that with the code you provided with the '0 auto' but it did not work. I copied their code shown below

 

.meteor-slides {
margin: 0 0px 0 0;
padding: 0;
position: relative;
z-index: 1;
overflow: hidden;
float: right;
}

 

to the Advanced Options <HEAD> section and it actually moved the slideshow all the way to the right. I tried changing float: right; to float: center; with no luck and then changing float: right; to align: center; but cannot get it in the center of the content area.

Link to comment
Share on other sites

There is no "align" property (I'm assuming you are talking about "text-align"?) nor no "float:center" either.

 

As Eddie said above, changing the margin on .meteor-slides to use "margin: 0 auto;" within meteor-slides.css will center it. I've tested this and it works.

 

I would ignore the advice about placing CSS in the <head> section, and update the actual meteor-slides.css CSS file itself. I believe the style.css file gives you that advice because they want to ensure that you don't make any permanent changes to the theme that can't be easily reverted, and that advice doesn't really apply to the CSS file for a slideshow.

Link to comment
Share on other sites

There is no "align" property (I'm assuming you are talking about "text-align"?) nor no "float:center" either.

 

As Eddie said above, changing the margin on .meteor-slides to use "margin: 0 auto;" within meteor-slides.css will center it. I've tested this and it works.

 

I would ignore the advice about placing CSS in the <head> section, and update the actual meteor-slides.css CSS file itself. I believe the style.css file gives you that advice because they want to ensure that you don't make any permanent changes to the theme that can't be easily reverted, and that advice doesn't really apply to the CSS file for a slideshow.

 

Thank you Ben and Eddie. I am sorry for being so dense about this stuff. I get intimidated because I don't know where to find things until it suddenly dawns on me. Nothing about this stuff ever seem logical to me. But, you both had the right solution, all I had to do was find the darn css which I finally did and bingo it works perfectly! Thank you both again.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...