A Few Updates

  • Author
    Posts
  • #132697

    tyeglover
    Member

    Hi! I have quite a few things I’l like to update. Can you help?

    – I was using the below to remove the chevrons from my menus but it doesn’t work for this theme. Is there a way to remove here?
    .main-navigation .page_item_has_children>a:before, .main-navigation .menu-item-has-children>a:before {
    display: none;
    }
    – Is there a way to remove the border from the featured slider?
    – Can I set the title of my posts to look like this with the category over the title and a single line underneath instead of the diamond. I do not need the date.
    – Can I move the blog except to be more underneath the photo on the home page? it’s very far left and looks odd.
    – Can I remove the author from individual posts?
    – can I remove the line from footer?
    – Is there a way to make photos in this theme smaller? By default they are very large.

    Sorry for such a long list!

    The blog I need help with is notorioustye.com.

    #132711

    ricardpriet
    Theme Author

    Hi there,
    thanks for writing and using Rosalie :)

    Yes, we can helps. Here you are the snippets of code:

    – Hide the arrow down from menu:

    .nav-menu>li.menu-item-has-children>a:after, .nav-menu>ul>li.page_item_has_children>a:after {
        content: none;
    }

    – Remove the border from the featured slider:

    .flexslider .slides>li .flexslider-link:before {
        content: none;
    }

    – Having the category above the post title. This is possible only on single post views:

    .single .entry-meta {
        position: initial;
    }
    .single .categories-links-index {
        position: absolute;
        top: 0;
        margin: 0 auto;
        left: 50%;
        transform: translate(-50%,0);
        text-transform: uppercase;
        font-style: normal;
        font-size: 13px;
    }
    .single .categories-links-index .genericon-category {
        display: none;
    }
    .single header.entry-header {
        padding-top: 20px;
    }

    To convert the diamond into a single line on single post views and homepage:

    .entry-header .entry-title:after {
        content: none;
    }
    .entry-header .entry-title:before {
        width: 50px;
    }

    – Center excerpt under the featured image:

    .entry-summary {
        max-width: 750px;
        margin: 0 auto;
    }

    – Hiding author from single post:
    1. From meta info just under the post title:

    .single .entry-meta span.author {
        display: none;
    }

    2. From box just under the related posts (end of post content):

    .single .author-info {
        display: none;
    }

    – Hiding white line in the footer:

    .pre-footer .container {
        border-bottom: none;
    }

    – Make images smaller: Yes, you can add this CSS to fix a maximum dimension (fox example 600px):

    .entry-content img {
        max-width: 600px;
    }

    If you want to center them instead of align to left, then add this:

    .entry-content img {
        margin: 0 auto;
    }

    Hope this helps :)
    Ricardo P. from SiloCreativo

    #132743

    tyeglover
    Member

    Thank you so much! The only one that didn’t work was the last one to center the photo.

    #132745

    ricardpriet
    Theme Author

    Hi, you are welcome!

    Yes it is true, we need a display: block; statement. Add this CSS:

    .entry-content img {
        margin: 0 auto;
        display: block;
    }

    Thank you!
    Ricardo P.

    #132772

    tyeglover
    Member

    Thanks! Is there a way to squeeze the body text in the same way? It’s a bit wide in comparison now.

    #132784

    ricardpriet
    Theme Author

    Hi there,

    yes, add this CSS:

    .entry-content {
        max-width: 600px;
        margin: 0 auto;
    }

    Set the max-width to your desired width.

    Thank you!
    Ricardo P.

    #132795

    tyeglover
    Member

    Great. I noticed in my category pages the description is far left. How can I margin it so that it’s beneath the category?

    Lastly I have been trying to re-create the shopstyle widget with image widgets because I know I’m not able to add this type of widget .com but is there a way I can add a white box around my image widgets and center the images in that box? I’m not able to get same size images so this is the only way I can think to make it look less skewed. Something like this?

    I’m pretty sure this is not possible but can I move this image widget to be across the center of my homepage instead of in the footer?

    #132813

    ricardpriet
    Theme Author

    Hi there,

    yes, you can center your category description using this:

     .archive-meta, .taxonomy-description {
        text-align: center;
        margin: 0 auto;
        max-width: 600px;
    }

    About the image widget, unfortunately there is no a CSS code to get this. The best option is to upload the images with the same resolution and dimensions (height and width). Add white space if it is needed.

    About moving this, it is not possible, because this widget area is inside the footer html element, and posts is inside other html element, so there is no way to mix them.

    Thanks again,
    Ricardo P.

    #132890

    tyeglover
    Member

    ahh ok too bad about the widget. How can I get there to be less space between the widgets to be smaller? The gap between the text widget and the image widgets is pretty wide. Also is there a way I can style my text widget to look like the below image with lines on each side of the text?

    https://www.dropbox.com/s/o3neucu7efu5179/widget%20inspo.png?dl=0

    #132891

    ricardpriet
    Theme Author

    Hi,

    add this and feel free to customise the values:

    #full-footer .widget_text {
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    #full-footer .widget_text .widget-title {
        margin-bottom: 0;
        z-index: 5;
    }
    
    #full-footer .widget_text .widget-title:before {
        content: "";
        height: 1px;
        background-color: #000;
        width: 100%;
        display: block;
        position: absolute;
        top: 19px;
        left: 0;
        z-index: -1;
    }
    
    #full-footer .widget_text .widget-title:after {
        content: "";
        height: 30px;
        background-color: #ffffff;
        width: 200px;
        display: block;
        position: absolute;
        top: 4px;
        left: 50%;
        border: none;
        z-index: -1;
        transform: translateX(-50%);
    }

    Thank you!
    Ricardo P.

You must be logged in to reply to this topic.