Okay
  Public Ticket #1710582
Styling pages and posts so they look just like listings pages
Open

Comments

  • Tim started the conversation

    I have just added my first 700 listings and now it is time to create some index pages for each region. 

    I figured that I simply need to style the page so it looks like a listing page and use the Featured Listings widget to display a masonry menu for each region. 

    However, there are a few things I need help with:

    1) Firstly, when I go to edit a page or post the H1, H2 and H3 styles are different to these styles in listings. I assume that there is some way to make all the headings across the site consistent either changing the CSS by making a child theme or by adding custom CSS by going to Appearance > Customise > Additional CSS. Which is the best way to do this and what do I need to change to make these headings look the same across the entire site?

    2) On the subject of H1, H2 and H3 styles. Where do I edit the H2 style. I find that the H2 and H3 are too similar and making H2 a little bigger will make it easier to differentiate between the H2 and H3 headings.

    3) My listings are all styled with the Single List Header Layout > Image and Map and I would like pages and posts to have a similar style (but possibly without the map).  

    Is there some way of achieving this look simply by using the Override Global Settings options?

    I'm sure I will have more questions as I start making all the region index pages, but the above three questions address the biggest issues.

  •  542
    Support Agent 1 replied

    Hi Tim,

    Please note that changes to the heading tags can be made through custom css statements.

    In order to change h2 tag please add the following code to the Appearance> Customize> Additional css:

    h2{
        font-size: 20px !important;
    }

    Please adjust the size according to your needs.

    In order to change h3 tags on listings please add the following code and edit it according to your needs:

    .btPostListingItem .btSingleListingDescription h3{
        font-weight: 700;
        line-height: 1.5;
        font-size: 1.25em;
    }
    Regarding the main headline on listing, please add the following code:

    .single-listing .bt_bb_dash_top.bt_bb_headline .bt_bb_headline_content > span{
        font-size: 25px;
    }
    In order to remove the map from the listing please ad the following code:

    .btSingleListHeaderStyle_image_map.btWithSidebar .widget_bt_bb_listing_marker_map{
        display: none;
    }

    Let us know if you need additional assistance.

    Also, please consider opening a new ticket (for each problem) since it would help us to better organize all the tickets and customer's issues.

    Thanks in advance.


    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!

  • Tim replied

    The changes to the H2 tag work on the listing pages. Thank you for this. It is important to have some distinction between the H2 and H3.

    However the other code you gave me just changes the listings. I don't need to make any other changes to anything else on the listings. It is the other post types (pages and posts) that I need to change so they are consistent with the listings. 

    I have attached three jpgs; one with an example of a "listings" post type, one with an example of a "pages" post type and one with an example of a "posts" post type. From this you can see that the pages and posts look very different to the listings. 

    For instance the H1 "Hampton Court Palace" for "listing" looks great, but the H1 "London" for "page" post type and "Exploring London by bus" for "post" post type is a little smaller. I would like these to all be the same as the H1 tag in the "listing" post type.

    Also the H2 "What to see at Hampton Court Palace" on the "listing" post type looks great, but the H2 "Practical information" on the "page" post type and "Hop-on hop-off sightseeing tour buses" on the "post" post type look completely different. I would also like these to be the same as the H2 tags in the "listing" post type.

    The H3 is even more different between post types. Again, I would like the H3 in the "pages" and "posts" post types to be the same as the H3 in the "listings" post type.

    I assume that changes to these can be made in the same manner as the changes to the H2 tag. 

    Once I have got this looking right, I will add a new ticket about making the header image of the pages and posts looking like the listings.

    Attached files:  location.jpg
      page.jpg
      post.jpg

  •  542
    Support Agent 1 replied

    Hi Tim,

    We will take a closer look at this and get back to you tomorrow.

    Thank you for understanding.


    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!

  •  542
    Support Agent 1 replied

    Hi Tim,

    Thank you for your patience.

    Please note that the font size for the London page and Exploring London by bus are actually the same:

    also, on listing Hampton Court palace:

    Regarding the h2 tag on posts please add the following code:

    .single-post h2{
         font-weight: 700;
        line-height: 1.5;
        font-size: 1.25em;
    }
    Regarding the h3 tags please add the following code:

    .single-post h3{
         font-weight: 700;
        line-height: 1.5;
        font-size: 1.25em;
    }
    Please adjust the values according to your needs.

    Let us know if you need additional assistance.


    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!

  • Tim replied

    Thank you for this. I guess it is just an illusion that makes the H1 heading appear smaller. 

    I put that code in and now the "post" post type looks right (that is the "Exploring London by bus" example), but the "page" post type that I will be using for my region index pages (the "London" example) still hasn't changed.

  •  542
    Support Agent 1 replied

    Hi Tim,

    In order to make h2 tag the same on whole website please add the following code:

    h2{
         font-weight: 700;
        line-height: 1.5;
        font-size: 1.25em;
    }

    It will affect every h2 tag.

    Let us know if you need additional assistance.


    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!

  • Tim replied

    Thank you for this. 

  •  542
    Support Agent 1 replied

    Hi Tim,

    We are glad we could help. Let us know should you need additional assistance.

    Also, if that is not too much of a hassle, please consider supporting us by giving us a rating at the downloads section of your ThemeForest profile (just below the download button) - http://themeforest.net/downloads. We would really appreciate it.

    Thanks a lot in advance.


    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!