WordPress.org

Ready to get started?Download WordPress

Forums

Spun
[resolved] [closed] Unique position for circle (12 posts)

  1. Maniek Fly
    Member
    Posted 1 year ago #

    Hi

    Is it possible to move the circles anywhere? Some like this: IMAGE

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Yes, you can move a page element anywhere you want with CSS.

  3. Maniek Fly
    Member
    Posted 1 year ago #

    Could you tell me how can i do it? I can't find any information about change the position of the circle.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    I guess you could do it with some jQuery;

    jQuery('.hentry').each(function($) {
     random = Math.ceil(Math.random() * 400);
     $(this).css('margin-top', random + 'px' );
    });

    Exampled http://awesomescreenshot.com/09e16of55f

  5. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    anywhere

    can you specify in more detail what you understand under 'anywhere' ?
    - random?
    - targeted?

    also review http://www.w3schools.com/css/css_positioning.asp

  6. Maniek Fly
    Member
    Posted 1 year ago #

    Thanks Andrew, but I didn't mean 'random'. I would like to set elements of a page in places determined by me. Thanks alchymyth, I begin to read.

  7. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    a bit of a boost - some code to add specific css classes to each circle, and some starter css codes (based on 7 circles):

    to be added into functions.php:

    add_filter( 'post_class', 'circle_numbers_post_class' );
    function circle_numbers_post_class( $classes ) {
    global $wp_query; if( is_home() ) $classes[] = 'circle-' . ($wp_query->current_post+1);
    return $classes;
    }

    for the style.css:

    .blog #primary { position: relative; height: 600px; }
    .blog .circle-1 { float: none; position: absolute; top: 25%; left: 15%; }
    .blog .circle-2 { float: none; position: absolute; top: 5%; left: 40%; }
    .blog .circle-3 { float: none; position: absolute; top: 25%; left: 65%; }
    .blog .circle-4 { float: none; position: absolute; top: 65%; left: 15%; }
    .blog .circle-5 { float: none; position: absolute; top: 85%; left: 40%; }
    .blog .circle-6 { float: none; position: absolute; top: 65%; left: 65%; }
    .blog .circle-7 { float: none; position: absolute; top: 45%; left: 40%; }
    @media screen and ( max-width: 1200px ) {
    .blog #primary { position: relative; height: 550px; }
    .blog #primary .hentry { width: 190px; height: 190px; }
    .blog .circle-1 { float: none; position: absolute; top: 25%; left: 5%; }
    .blog .circle-2 { float: none; position: absolute; top: 5%; left: 40%; }
    .blog .circle-3 { float: none; position: absolute; top: 25%; left: 75%; }
    .blog .circle-4 { float: none; position: absolute; top: 65%; left: 5%; }
    .blog .circle-5 { float: none; position: absolute; top: 85%; left: 40%; }
    .blog .circle-6 { float: none; position: absolute; top: 65%; left: 75%; }
    .blog .circle-7 { float: none; position: absolute; top: 45%; left: 40%; }
    }
    @media screen and ( max-width: 800px ) {
    .blog #primary { position: relative; height: 400px; }
    .blog #primary .hentry { width: 150px; height: 150px; }
    }
    @media screen and ( max-width: 600px ) {
    .blog #primary { position: relative; height: 300px; }
    .blog #primary .hentry { width: 130px; height: 130px; }
    }
  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    @alchymyth, Wow that was detailed.

  9. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    this is a shot of the result - actually quite interesting ... http://imageshack.us/photo/my-images/713/spunformatting.jpg/

    (I personally don't like the virtually unreadable menu, and the grey image hover; luckily there is a glitch in the theme where to hover grey-to-color does not work in narrow screens...in ff20)

  10. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    "luckily there is a glitch in the theme"

    Not a glitch, that's by design.

  11. Andrew
    Forum Moderator
    Posted 1 year ago #

    I noticed that design for devices that don't have cursors, very clever :)

  12. Maniek Fly
    Member
    Posted 1 year ago #

    @alchymyth thanks - you very helped me :)

    I did it a little differently.

    I added into style.css:

    #post-17.post-17.post.type-post.status-publish.format-standard.hentry.category-uncategorized.no-thumbnail{
            float:none;
            position: absolute;
            top:20%;
            left: 3%;
    }
    #post-15.post-15.post.type-post.status-publish.format-standard.hentry.category-uncategorized.no-thumbnail{
            position: absolute;
            top:0%;
            left: 52%;
    }
    (...)

    This is a little less professional way than your, but it works too.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic