WordPress.org

Ready to get started?Download WordPress

Forums

Pictorico
[resolved] Date and title of posts permanently show up in RTL (9 posts)

  1. idanwordpress
    Member
    Posted 6 months ago #

    Hello,
    I want to make the date and title of posts at the main page permanently show up with RTL using...
    I tried to use this code:

    .home .site-content .entry-header,
     .archive .site-content .entry-header,
     .search .site-content .entry-header {
     left: 0;
     }

    and it wasn't work, then I tried to take out file by file from my Child theme folder I found that the problem was with the RTL file, when I take the rtl.css out the code is works but the site is not RTL.
    How can I fix this problem?

    Thanks for the helpers :)

  2. I see a similar post about making the date and time show up only on mobile devices: http://wordpress.org/support/topic/date-and-title-permanently-show-up-only-for-mobile

    Could you please clarify if you want to have the date and time show up at all screen sizes, or only on smaller screens?

  3. idanwordpress
    Member
    Posted 6 months ago #

    Thanks for your replay,

    Yes I want it only for devices with small screen,
    because this devices uses screen touching and it's not shows for users
    the text when they are hover the post,
    if there is no way to do that...
    so I just want to make all sizes of screens shows up the text permanently
    while I'm still have the RLT file in my child theme.

    Thank you.

  4. This CSS should make the date and title persistent:

    .blog .site-content .entry-header,
    .archive .site-content .entry-header,
    .search .site-content .entry-header {
       right: 0;
    }

    If you want those elements to persist only at smaller screen sizes, you can wrap that CSS in a media query, like this:

    /*For browser/screen widths less than 768px*/
    @media screen and (max-width: 768px) {
       .blog .site-content .entry-header,
       .archive .site-content .entry-header,
       .search .site-content .entry-header {
          right: 0;
       }
    }

    You can adjust the max-width depending on the size at which you want the rule to kick in.

    You can learn more about using media queries that target certain screen sizes here:

    http://en.support.wordpress.com/custom-design/custom-css-media-queries/
    http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
    http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

  5. Please keep in mind that newer versions of Pictorico use the "blog" class for the blog page, instead of "home," which is what the earlier code referenced.

  6. idanwordpress
    Member
    Posted 6 months ago #

    The code works perfect.. only small devices shows the text permanently,
    But again, the RTL file keeps making problem..
    only if I take the file out of the child theme folder, the code works..
    and I need this RTL file..
    so maybe the code inside the RTL file isn't good.
    here is it:
    rtl.css:

    /*
    Theme Name: Pictorico Child
    Template: pictorico-child
    */
    
    @import url("../pictorico/rtl.css");
    /*
    ------------------------------------------------
    */

    What do you think?

  7. Ah, that doesn't look quite right. :-) You can't have a child of a child theme like that - pictorico-child.

    First, delete the rtl.css file you created and put in your child theme.

    Using the import method to call in the parent's styles.css and rtl.css, your child theme's style.css would look something like this. Of course it'll also include any other customizations you may have made in your child theme's stylesheet, I've only shown the one I helped you with here.

    /*
     Theme Name:     Pictorico Child
     Description:    Pictorico Child Theme
     Template:       pictorico
     Version:        1.0.0
    */
    
    @import url("../pictorico/style.css");
    @import url("../pictorico/rtl.css");
    
    /* =Theme customization starts here
    -------------------------------------------------------------- */
    
    /*For browser/screen widths less than 768px*/
    @media screen and (max-width: 768px) {
       .blog .site-content .entry-header,
       .archive .site-content .entry-header,
       .search .site-content .entry-header {
          right: 0;
       }
    }

    This also assumes you've set your locale to an RTL locale in wp-config.php. For example:

    define('WPLANG', 'he_HE');

    I tested it on my end and it's working, so if you need further help, it would be great if you could provide a link to your site so I can see what's going on directly. Thanks!

  8. idanwordpress
    Member
    Posted 6 months ago #

    Awesome!
    It's working perfect, I'm so happy now :)
    Thank you very much!!

  9. Glad to hear it and you're very welcome!

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.