Have secondary title styled differently than primary (h2) title

  • Resolved alex42

    (@alex42)


    8 years, 7 months ago

    The secondary title is using the style info of the article.page h2 (or just h2) in style.css.

    I’m using it to display the names of books and their respective authors:
    Book Title (h2 header style; large, Times New Roman)
    by the author (wanting different style; small, Arial)

    and

    The secondary title also appears on the left of the primary title like this, “secondary tile: primary title”.

    Is there a way to make it,
    Primary Title
    secondary title

    1. How do I make the secondary title different than the primary title? (i.e. create/use a selector that is not ‘h2’. Also, does it go in my style.css or somewhere else?)

    2. How do I make the secondary title appear underneath the primary title? (if this is tricky, I wouldn’t mind the secondary title appearing to the right of the primary title)

    https://www.ads-software.com/plugins/secondary-title/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author thaikolja

    (@thaikolja)

    Hi alex42, thanks for taking the time to post our issue on here.

    It’s a bit hard for me to understand your problem, it would be nice if you could provide screenshots of a) how it looks like now and b) how you want it to look like. The URL of the website in question itself would also be good to know so I can have a look at the output HTML code.

    If you can give me that, I’m sure I can help you quickly.

    Thread Starter alex42

    (@alex42)

    This is what it looks now and what I’d like it to look like. I’ve taken a screenshot of some of the output as well:

    https://s32.postimg.org/nu8l2nyx1/books.jpg

    Plugin Author thaikolja

    (@thaikolja)

    The cleanest way of doing this would be by deactivating the “Auto show” function and implement it via PHP. However, if you insist on doing this with “Auto show”, do the following:

    1. Go to “Settings” – “Secondary Title” and use the following as “Title format”: %title% <div class="secondary-title">%secondary_title%</div>

    2. Go to “Appearance” – “Editor” and open “style.css”. Then, at the end of the file, enter the following:

    .secondary-title {
   font-size:14px !important;
   margin-top:10px !important;
}

    The result should look somewhat like this. Play around with the font size and the margin and/or other CSS elements until you got your desired appearance.

    Please let me know if this has solved your issue.

    Thread Starter alex42

    (@alex42)

    Yes, it did! I followed your second method. And, I didn’t need to use the !important. This is what it looks like with the css:

    https://s31.postimg.org/ul2z3xo57/books2.jpg

    Thanks for your help!

    Hi there!

    I have a similar question, except I want the secondary title to be on top of the main title. I think I need to change the title format. But don’t know what it should look like now.

    Even as a complete newb at coding the CSS is not a problem, I can figure that one out. The <div class> etc, etc is making my head hurt hahah, so please help.

    Thanks in advance

    Greetings Di

    Sorry,

    but after I posted my question I figured it out!

    Thanks!!

    Plugin Author thaikolja

    (@thaikolja)

    Well done, dionnekathleen. Maybe you can explain it in your own words just in case other users have the same problem like you.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Have secondary title styled differently than primary (h2) title’ is closed to new replies.

Tags