Premium Theme Support › Graph Paper Press › Qua

Some CSS and layout questions

  • Author
    Posts
  • #103172
    anakin022
    Member

    Hello,

    1. How can I change the height of the featured slider images on the homepage? I’d like them to look just like on this blog: https://yogalime.com/

    2. Is it possible to remove the text from the slider, but keep the “Continue” button? I tried removing the text with the following code, but how am I supposed to actually open the actual blog post then? Can I maybe make the whole image ‘clickable’?

    .slide-text { display: none; }

    3. I’ve added the following code to change the section titles:

    h2.section-title { visibility: hidden; }
h2.section-title:after { display: block; visibility: visible; }
#section-portfolio h2.section-title:after { content: 'Work';}
#blog-section  h2.section-title:after { content: 'Articles';}

    Now I’, also missing the horizontal lines that devide each section. How can I bring that back, but keep my changed titles?

    4. Is it possible to change the sidebar over to the left side instead of the right? I think it would improve the overall readability of the site.

    5. Is it possible to hide the sidebar section on certain pages? How?

    6. Post images are cropped 1:3. Do I have any influence on how they look? Can I somehow determine which area of the image is cropped? Right now I’m thinking about uploading an extra image for every post that I crop to the 1:3 format beforehand. Would that do the trick or is there an easier way?

    Thank you so much. This is an awesome theme!

    The blog I need help with is: (visible only to logged in users)

    #103368
    maharzan
    Theme Author

    Hi,

    Maybe this can help

    1. div.flexslider { height: 700px!important} You might be able to change the height by adding an image with longer height.

    2. .slide-caption { display: none; }

    3. I think you can add this to the after classes to get the line back

    border-top: 1px solid #ccc; padding-top: 2.5em;

    4. This might work

    .three-fourth-col {
    width: 70%;
    margin-right: 0;
    float: right;
    margin-left: 5%;
}

    5. You will have to get the page-id / post-id class of each page and do something like

    .postid-79 #secondary { display: none; }

    6. You can do this in your software like photoshop before uploading or crop it within WordPress which is never a easy solution. I think WordPress automatically just takes the center of the image of the size we give to WordPress.

    Hope that helps.

    Thanks,
    Chandra

    #103372
    anakin022
    Member
    Original poster

    Thanks for your reply.

    2. This code will only leave me with the dots, so there’s no link left to click on. Is it possible, to get rid of the post excerpt and only show the title, the link button and the dots. Similar to what the page does automatically, when it is viewed on small screens.

    4. This would be great, but on mobile devices it now looks like this:
    https://dl.dropboxusercontent.com/u/9741683/css%2C.jpg

    Any way to fix this? Alternatively I’d like to see the sidebar right-aligned instead. Is there a CSS for that too?

    5. I’m getting the page-id from the URL, but it doesn’t seem to work. Any idea?

    I tried changing the page template to portfolio instead, which looks good. But now it’s showing the portfolio images at the very bottom.
    Example: https://hqcovers.net/contact/

    If I can get rid of them, then I’d be happy as well. Can you help me?

    #103377
    maharzan
    Theme Author

    2, It should do exactly that. Can you apply the css so i can check why its not working? The title and the button should be there, only the excerpt is hidden.

    4. Which site are you adding this to? If you can add the css and provide me the link I will recheck. Sidebar is on the right by default. That code above should only move sidebar to the left.

    5. Which page?

    If you are using the portfolio page template, you shouldn’t add any content on that page. Its for that purpose, just show portfolio items on a page.

    If you can get back to me, I will be able to assist further.

    #103380
    anakin022
    Member
    Original poster

    2. Allright, this is working now. I have no clue, what I have done different, but it’s fine :)

    4. I have now moved the sidebar to the left using your css. Can you please check the site http://www.hqcovers.net and then reduce the browser window in width. You’ll see what I mean then, the site won’t use the left 30% of the window.

    5. I have added your css using the page-ids for my pages “About”, “Disclaimer” and “Contact” but it doesn’t seem to work.

    I have another serious issue. I’m getting numerous feedback that the frontpage is 25MB in size, which takes almost a minute to load. This is way too long. Is there a way to reduce the number of blog posts showing on the frontpage template? Right now it’s showing 50 posts. Can I reduce that to maybe 10 posts and add infinite scroll or pagination?

    Thank you soo much for your help! Especially today on sunday! I really appreciate.

    #103381
    anakin022
    Member
    Original poster

    Okay, I managed to reduce the blogposts loaded by default to 10 instead of 50. What I would like to have is a “show more” button or an autoload, once a visitor scrolls to the bottom of the page. Your theme is advertised with an “Infinite Scroll” feature, so I assumed this would work just like that.

    #103456
    maharzan
    Theme Author

    4. I didn’t get what you mean. Is this fixed? What do you want to reduce?

    5. can you try this for about page?

    .page-id-2 #secondary { display: none; }

    You might also want to add this to center the content

    .page-id-2 #primary { float: none;
    margin: 0 auto; }

    Actually, this reminds me it might be better to add a template without a sidebar so you can assign that to these pages.

    Infinite scroll, doesn’t work on the homepage since the homepage is a combination of portfolio / blog and other elements. It only works on the blog archives such as : https://quademo.wordpress.com/blog/

    Let me know if you still need help.

    Thanks,
    Chandra

    #103463
    anakin022
    Member
    Original poster

    Thank you again. Sorry for being a pain in the ass. But I’m getting there…

    Actually, this reminds me it might be better to add a template without a sidebar so you can assign that to these pages.

    This would be the best. How quickly would you be able to do that? Right now I’ve managed to get rid of the sidebar, but the site isn’t taking advantage of the full width. I’ve added a screenshot to help you understand it better:
    https://dl.dropboxusercontent.com/u/9741683/wp1.jpg

    Is it possible to make everything in the sidebar right-aligned?
    I’m talking about this area: https://dl.dropboxusercontent.com/u/9741683/wp2.jpg

    Can I reduce the width of this area to get more space for the actual post excerpt text:
    https://dl.dropboxusercontent.com/u/9741683/wp3.jpg

    And would you please have a look at this page: https://anakin022.wordpress.com/blog/
    How can I get rid of the featured slider _only_ on this blog-page? I’d like to keep it on the frontpage.

    #103496
    maharzan
    Theme Author

    Hi,

    I have added the full width template so look out for that in a day or two (after .com team approval).

    Try this to align right

    #secondary { text-align: right; }

    You can try this css

    .entry-meta.one-third-col { width: 20%; }
.excerpt-content.two-third-col { width: 75%; }

    Try this to hide featured section

    .blog #featured-section { display: none; }

    Thanks,
    Chandra

  • The topic ‘Some CSS and layout questions’ is closed to new replies.