Home Forums Archived Forums Weaver II Theme Weaver II Pro Date above title

Viewing 16 posts - 1 through 16 (of 25 total)
  • Author
    Posts
  • #18147
    Wasserwerk
    Participant

    Hello,
    a new layout ist wanted and one of the tasks is to have date and time above the title like this

    How can I achieve that please ?
    Best regards,
    Uwe

    #24048
    scrambler
    Moderator

    You can probably do that with the following rules

    .entry-meta {margin-top:-50px;}                                     /*moves the top meta info line up*/ 
    .entry-hdr {margin-top:20px;margin-bottom:10px;}    /*opens up some space above the title and below*/

    To limit that to a specific blog page, add the page id class first, or the .blog  class for all blog pages

    .page-id-xxx .entry-meta {margin-top:-50px;}                                     /*moves the top meta info line up*/ 
    .page-id-xxx .entry-hder {margin-top:20px;margin-bottom:10px;}    /*opens up some space above the title and below*/

    #24049
    Wasserwerk
    Participant

    thanks for your answer which works if the title has only 1 line.
    having 2 lines the metaDiv is placed over the title for example.

    How can I change the following two lines in the template ?
    <div class=”entry-hdr”>…</div>
    <div class=”entry-meta”>…</div>

    If I can switch theme to:
    <div class=”entry-meta”>…</div>
    <div class=”entry-hdr”>…</div>
    then the date should appear above the title, correct ?

    May using the Wearver II Pro Childtheme can do it ?

    #24050
    Wasserwerk
    Participant

    May I have to ask a new question, but the following comes together with the initial question.
    Below you see the new layout which I have to realize with Weaver II Pro.
    Is that possible ?

    I already have realized many,
    but when you see something that is not possible to realize with Weaver II Pro,
    please let me know.

    #24051
    Weaver
    Keymaster

    I can’t think of how to easily do the “bell” or “lightning” left border bars on the first two posts.

    I can’t think of any way to do the 300×600 box outside the whole page – could be in the prewrapper, but it would be hard to get it to look good floating out the the right like that. I don’t know how to handle that nicely on Mobile, either. Would be easiest to hide it for mobile, but you could do a custom JavaScript, too. I also think it is not very good design – the trend these days is to make the site much wider on wide screens, and extending the whole site’s width by a box on the outside sort of defeats this purpose.

    #24052
    scrambler
    Moderator

    If you need to change the order of the title and meta line in the html, yes you need to create a child theme and edit the PHP template to do that.

    With CSS only you can only move it a fixed height.

    You could may be reformat the title to include the meta info line above it, using an Action & Filter piece of PHP like in the example mentioned in the thread below under *** Adding the content of a custom Field to the Post title (from @weaver) ***

    http://forum.weavertheme.com/discussion/8405/actions-filters-tips-and-examples-part1

    But you are on your own to figure out the PHP 🙂

    For your page example, given you say you have done much of it, instead of making us think about the who thing be specific about which one you are having a problem, and what is the behavior on mobile

    #24053
    scrambler
    Moderator

    Actually I just realized there is an easy way to have the title below the top info line if you have pro.

    You can Hide the normal Post Title, then recreate a custom Post Info line that does the info line and the Title

    Check the custom Post Info line help, but you can test a simple one with the code below in Post Specifics > Custom Info lines > Top post info line. The <br/> jump to the next line, and you may have to add more styling to the title, but it does the job

    %date-icon%%date% %author-icon%%author%<br/><h2 class=”entry-title” style=”font-size:200%;”>%title%</h2>

    #24054
    scrambler
    Moderator

    Creating a tab on the left of the posts can be done using the following rule

    #main, #content {overflow:visible;}
    article.post {margin-left:-65px;padding-left:65px !important;background:url(tabImagUrl) left/50px 100% no-repeat;}

    The margin value shifts the post left by the width of the tab image (50px) plus content left padding (15px)
    the padding value moves the content back to the right
    The background property uses the URL of the tab image

    Now making the title and info line besides the featured image will not be directly possible in weaver II pro if the title and meta info line will not always have the same height. It would in Xtreme as there is an option for that.

    If you need the Meta Info line and Title beside the featured image, You would have to hide the default title and top meta info line, then recreate these using PHP in the content of the posts.

    You could probably automate the process by putting the php that builds the info line and title in a Shortcode (using weaver shortcoder) and then always include the Shortcode at the top of each post content

    #24055
    scrambler
    Moderator
    OK, So here is how you get your Date and Title besides the featured Image.
    You activate PHP at the bottom of The Pro option page
    You place the rules below in the Theme Custom CSS Rule box
    #content, #main {overflow:visible;}
    In the post editing page.
    You check Hide Post Tite, Hide Top info line, Hide bottom info line
    You check allow Raw HTML and Script
    You start your post content with the following code (in text mode)
    <span class=”entry-date”>[weaver_php] echo get_the_date(); [/weaver_php]</span>
    <span class=”updated”> [weaver_php] echo get_the_time(); [/weaver_php]</span>
    <h2 class=”entry-title”>[weaver_php] echo get_the_title(); [/weaver_php]</h2>
    Then for the posts that must have the Tab on the left extending outside of the wrapper, You add the css below in the Per Post style box

    {margin-left:-65px;padding-left:65px !important;background:url(TabImageUrl) left / 50px 100% no-repeat;}
    h2.entry-title {clear:none !important;}
    Because automatic excerpts are stripped of all code, You will need to use Manual Excerpt and put the same code as above at the top of the manual excerpt content.
    To make it easier to insert the header, you can put that code in a shortcode and insert the shortcode
    #24056
    Wasserwerk
    Participant

    first of all, thank you very much !!!
    your idea “%date-icon%%date% %author-icon%%author%<br/><h2 class=”entry-title” style=”font-size:200%;”>%title%</h2>” is working,
    but the title is not a link that way. How can I link it ?

    %date% is a link, how can I make it, that it is not a link anymore ?

    #24057
    Wasserwerk
    Participant

    and sorry for not being specific…

    How do I add an image here ?

    #24058
    Wasserwerk
    Participant

    here are 2 more problems:

    First: How can I use the place under the main-menu (full width) ? The space in the red rectangular.
    Is it possible to have a widget there ?

    Second: The designer wants, that the articles are sortable (red arrows) by date, by category …..
    Is there any way to achieve that ?

    #24059
    Wasserwerk
    Participant

    and the backgournd:

    where do I have to place the background ?
    Should I use one image or two – in the body and or in the wrappers ?

    #24060
    scrambler
    Moderator

    1- “the title is not a link that way. How can I link it ?”

    put it inslide a link tag using a php shortcode to get the url (search the wordpress codec for “php to get post permalink”)

    probably

    <h2 class=”entry-title” style=”font-size:200%;”><a href=”[weaver_php]echo get_post_permalink();[/weaver_php]“>%title%</a></h2>

    2- “%date% is a link, how can I make it, that it is not a link anymore ?”
    if you check the help, there is no variable for a non link date, so you would have to use php there too like in the last example I gave you to make the date and title using a shortcode.

    <span class=”entry-date”>[weaver_php] echo get_the_date(); [/weaver_php]</span>
    <span class=”updated”> [weaver_php] echo get_the_time(); [/weaver_php]</span>

    So the Custom info line would look like

    <span class=”entry-date”>[weaver_php] echo get_the_date(); [/weaver_php]</span>
    <span class=”updated”> [weaver_php] echo get_the_time(); [/weaver_php]</span>
    <br/><h2 class=”entry-title” style=”font-size:200%;”><a href=”[weaver_php]echo get_post_permalink();[/weaver_php]“>%title%</a></h2>

    But remember using the custom post info line will not allow you to get these beside the featured image. Only the method of putting them IN the post will

    3- “How do I add an image here ?”
    If you mean in the title of a widget, you can probably do that by adding a background image rule in Main options > Widget Areas > Widget Title CSS+ box. Something like

    {background:url(TitleImageUrl) right no-repeat;}

    of course if you need different images for different widgets, you will need to inspect the page to find the proper selector for that title and build a full rule placed in Adanced options > Head section > Custom CSS Rule box like below for a widget with the ID text-3

    #text-3 .widget-title {background:url(TitleImageUrl) right no-repeat;}

    4- “How can I use the place under the main-menu (full width) ? The space in the red rectangular”

    I believe the permain code box in the HTML insertion area should do it

    5- “The designer wants, that the articles are sortable (red arrows) by date, by category …..
    Is there any way to achieve that ?”

    You probably need to find yourself a plugin for that. It could be a suggestion for @weaver to add as an option in the Show post shortcode to display as Title only / drop down list, with a title.

    6- “and the background:”

    I believe this is not a background but a drop shadow on the wrapper. You can add the CSS to the Wrapper BG CSS+ box, you will need to research the CSS Box-shadow property and experiment with different set of values
     

    #24061
    Wasserwerk
    Participant

    Hi, I am still working on it, is there a way in Weaver II Pro to show archiv like this, dynamically ?

    #24062
    Wasserwerk
    Participant

    …. and how do I place google-adsense-script above the header please ?

Viewing 16 posts - 1 through 16 (of 25 total)
  • The forum ‘ Weaver II Pro’ is closed to new topics and replies.