Making visual changes to different pages

Community Forums Forums Design Tips and Tricks Making visual changes to different pages

This topic is: not resolved

This topic contains 6 replies, has 2 voices, and was last updated by  badedyr 1 year, 3 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #53721

    badedyr
    Participant
    Post count: 7

    Being new to both coding and Genesis i’m having a hard time figuring out how to make changes that goes beyond just CSS edits.
    I am currently using the Quattro theme and i have managed to make some small changes to placement of comments, remove author info etc. using shortcodes.

    However there are a few things i cannot locate where to change:

    - I would like to align the “Comments” to the right side (http://demo.studiopress.com/quattro/) instead of it being next to the author
    - Each post is separated by a double-line – can i add a single line where i want to separate sections? eg. if i wanted to add a single line between “About” and “Comments” sections here: http://demo.studiopress.com/quattro/threaded-comments/

    Of possible i would also like to change how some of the DIV tags behaves. eg. the “Filed Under” and “Tagged With” is currently in a gray box where i would like to just have a single line, then the categories/tags and then a line and then a “You may also like” section etc.
    I think i need to use Hooks but i am lacking an example that shows me how i could make these “design changes”.

    Thank you in advance.

    http://demo.studiopress.com/quattro/
    #53723

    kelmom
    Participant
    Post count: 23

    1) To get the comments to be placed to the right, do the following:

    span.comments { float:right; }

    2) Iit looks like span.comments .tags has a background image that produces the line you see as a separator between author and comments.

    span.comments .tags {
    background: url(“images/nav-line.png”) no-repeat left center transparent;
    }

    You could replace nav-line.png with another graphic that has a single line only. :)

    3) Here is a plugin for related posts: http://wordpress.org/plugins/wordpress-23-related-posts-plugin/

    You could change the “Related Posts” heading to “You May Also Like”

    Hope this helps! :)


    ~Kellie~

    #53738

    badedyr
    Participant
    Post count: 7

    I just tried adding

    span.comments { float:right; }

    to style.css but that does not seem to change anything. The nav-line.png and the comments part is still aligned to the left right after the author name.

    The double line i was referring to was the line that separates 2 posts on the frontpage. I was interested in using such a line to add additional content after the post-content. eg. after the post i would have a section with “tags, categories” which visually would be separated from the post content with a horizontal line.

    thanks!

    #53754

    kelmom
    Participant
    Post count: 23

    Did you clear your cache? Or do you have a caching plugin active while making changes? If you do, then it will be hard for you to see the changes you have made on your site because the site will reflect the cached page.

    If you want, post your URL and I can help troubleshoot. :)

    Here is the code that is making the double line separator between posts:

    .post {
    border-bottom: medium double #CCCCCC;
    margin: 0 0 30px;
    padding: 0 0 40px;
    }

    Change border-bottom to : medium single #cccccc;

    This will give you a single line in between the posts. :)


    ~Kellie~

    #53763

    badedyr
    Participant
    Post count: 7

    Dont know if i have a caching plugin active :) I can see other changes like font size etc. but the float:right did not do anything.

    When i change the border-bottom to single it just disappears as in i dont see any lines not even a single.
    The blog is currently not publicly available as its only running internal at the moment.

    Also is it possible to make individual changes to separate pages?

    I would like one look with comments on the front page showing all posts but another layout on the individual pages. eg. i dont want it re-using the ‘genesis_post_info’, ‘post_info_filter’ on the main page as well as on the individual pages.

    #53767

    kelmom
    Participant
    Post count: 23

    Try :

    span.comments .tags {
    float: right;
    }

    Does that do anything?

    Individual pages or individual posts? Do you mean that if someone clicks on a post on the front page, then you don’t want ‘genesis_post_info’ or ‘post_info_filter’ to show?


    ~Kellie~

    #53780

    badedyr
    Participant
    Post count: 7

    Sorry, yes, I meant individual posts. I would like to achieve something along the lines of this:

    http://www.garancedore.fr/en/2013/08/01/clean/

    Here the categories and tags are nicely separated from the social icons but still part of the post visually and the “you may also like” section and “comments” is in its own.
    Wen looking at the front page that post named “clean” only shows date, categories and comments differently from when you click the post.

    Thanks – I’m hoping I can figure out how to make such design changes :) not really sure if I need hooks for this controllable as widgets or what I need to go after.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.