Site5

Menu

Support Forums

align left / align right.

Home Forums Focused align left / align right.

Tagged: 

This topic contains 34 replies, has 14 voices, and was last updated by  liuchunkai 2 days, 21 hours ago.

Viewing 15 posts - 16 through 30 (of 35 total)
  • Author
  • #7186

    Bogdan Oasa
    Keymaster

    Hello,
    Can you give me an exact url of a post/page where you used aligned lef/ right and it doesn’t work.

    Thank you!

    #7189

    h8usernames
    Participant

    Hi bvoasa,
    I put the code back in and you can a post at http://www.pla.net.nz/K9h43, it is also showing on the blogroll on the homepage.

     

    A few things to note,

    the social icons are missing
    the post type icons are missing
    the first image you see that is left aligned is only doing so as there is a caption
    all other images have a different size set than is being displayed, when you inspect the element with developers tools or firebug you will see that the actual size of the image differs to the size that is set in the HTML
    the second image should be left aligned, the third image should be centered and the forth image being right aligned

    I pasted the code after the media queries in style.css

    I have also noticed that anchor tags with target=”_blank” open in the same browser window/tab, they aren’t opening in a different window/tab as they should.

    Thanks for your attention to this.

    #7193

    Bogdan Oasa
    Keymaster

    first, for the icons that are missing, check if you have these files: http://www.pla.net.nz/wp-content/themes/focused/img/social_ico_sprite.png
    and http://www.pla.net.nz/wp-content/themes/focused/img/sprite_icons_posts.png

    nothing is pasted after the media queries in style.css nor in css/main.css
    Please check again.

    #7196

    h8usernames
    Participant

    Yes, I double checked and the image files are there, they only disappeared after the edit, this made me realize that the URL linking to the sprite images was only copied and pasted from the main.css file however, the location of the css file being used changed from /wp-content/themes/focused/css/ to /wp-content/themes/focused/ meaning the linking is no incorrect, to fix this you need to go to the style.css page and change the following

    background-image: url(../img/social_ico_sprite.png);

    to

    background-image: url(img/social_ico_sprite.png);

    and

    background-image: url(../img/sprite_icons_posts.png);

    to

    background-image: url(img/sprite_icons_posts.png);

    Regarding nothing being pasted after the media queries, this is not correct as this is what broke the icons as mentioned above, you can see the css file at http://www.pla.net.nz/wp-content/themes/focused/style.css where you will see the code.

    Please check again.

    #7198

    h8usernames
    Participant

    I just noticed that the .current-menu-item in the new CSS has the same image problem as does the #searchform, simply change the following in the style.css file

    – NAV ARROW

    background:url(../img/arrow_nav.png) 50% 100% no-repeat;

    to

    background:url(img/arrow_nav.png) 50% 100% no-repeat;

    – SEARCH FORM

    background: #fff url(../img/ico_search.png) 96% 50% no-repeat;

    to

    background: #fff url(img/ico_search.png) 96% 50% no-repeat;

    #7199

    h8usernames
    Participant

    I was just wondering, what version of WordPress are you guys developing with? I am using version 3.5.1 – could this contribute to the problem or is there something I am missing?

    #7201

    h8usernames
    Participant

    Guilty CSS found!

    In both the copy of style.css and the original css/main.css the follow code block was causing the problem with content images:

    article .entry-content img {
    /* position: relative;
    zoom: 1;*/
    height:auto;
            width:100%;
        }

    To fix this change the above block in both files to:

    article .entry-content img {
    /* position: relative;
    zoom: 1;
    height:auto;
            width:100%;*/
        }

    CAUTION: I am uncertain if this will effect anything else, I don’t believe it will however, you have been warned!

    #7216

    xyzxyz
    Member

    This sucks..all left/right align images are broken in this theme, even after the css copy/paste above.  For a blog with hundreds of existing pictures, there is no way to implement this theme as the only workable solution is to put a caption under each image, otherwise, every image gets stretched to full size and align left/right doesn’t work.

    This does NOT work:
    <img class=”alignleft size-full wp-image-658″ alt=”alt title” src=”the image url” width=”250″ height=”384″ />

    This does work:

    [caption id="attachment_658" align="alignleft" width="256"]<img class=”size-full wp-image-658″ alt=”alt title” src=”the image url” width=”250″ height=”384″ /> The Required Caption[/caption]

     

    #7218

    h8usernames
    Participant

    Hi xyzxyz,
    First I agree it is annoying, I spent a fairly large amount of time finding and fixing this problem that I don’t believe should have existed in the first place.

    Did you make the change to the CSS that I suggested?

    In the css/main.css and style.css files (assuming you pasted in the additional code into style.css provided earlier), comment out the everything for

    article .entry-content img {

    This is how I managed to get it fixed, you can check it working at http://www.pla.net.nz/2013/03/no-its-a-mouse that I used previously as an example. The first image has no caption and is aligning left and the lower 3 are center aligned without captions.

    The problem is the theme makes all image widths 100% and scales the height accordingly, this means that regardless of the other code specifying image sizes and positioning the image would always scale to the maximum amount of space available to it. The reason the thumbnail images with captions didn’t get affected is because they have a different CSS class assigned to them that ignored the rule that created the problem.

    Regards,
    Ryan

    #7219

    xyzxyz
    Member

    Well I’ll be damned.. that did do it.  I did everything except the change to main.css.  I incorrectly assumed style.css was going to override that.

    Now..  is there anyway to get the main article content (not the titles but the content) to extend all the way over to the sidebar?

     

    Thanks for the quick help!   Nice to see it working again!

    #7220

    h8usernames
    Participant

    I’m glad to hear it worked for you xyzxyz, I assumed the same thing at first but using developer tools in the browser I realized that the browser was acting upon both – I still don’t know why.

    Regarding your new question, I have been thinking about doing that too, to do it in style.css change the following:
    article .entry-content {
    padding-bottom: 20px;
    max-width: 650px;
    }

    To…

    article .entry-content {
    padding-bottom: 20px;
    max-width: 100%;
    }

    Again you may need to change main.css also

    Let me know how you go

    #7221

    xyzxyz
    Member

    oh yeah!  looks sexy now!!  Thanks, brother!

    I also prefer the navbar to have a slightly different look (in case anyone else digs it):

    nav.content {

    background-color:#EEEEEE;
    margin-bottom:0;
    padding-top:35px;

    }

    and removal of the arrows (background-image:none;) on the nav content properties to vertically center the navigation links.

    I got to get better at those developer tools.  I know how to scan the css file with firebug and do basic fixes, but it looks like there’s a ton of stuff I could do in there if I only knew how!

    Thanks again.  Looks great now!

    #7222

    h8usernames
    Participant

    No problem mate, thanks for the design tips too.

    It just takes practice, playing, breaking and fixing to learn a lot of this stuff, after 12-years designing and programming ya tend to pick up a few tricks.

    Take it easy

    #7568

    bynbutterfly
    Participant

    How about the theme “rockwell”? Is there any one who has the complete css codes for this theme?

    #7595

    Bogdan Oasa
    Keymaster

    Hello,
    Rockwell’s stylesheet is in style.css and css/[different styles]

Viewing 15 posts - 16 through 30 (of 35 total)

You must be logged in to reply to this topic.