Need Custom Sidebar text with different font

  • Resolved Jas999

    (@jas999)


    9 years, 4 months ago

    Using Pinnacle free V1.2.8, with a child theme.
    How can I have Custom Sidebar text with different font style and line height than the ones in the main content?
    CUSTOM SIDEBARS: I created 2 custom sidebars, “A” and “B” (Appearance -> Theme Options -> Misc Settings -> Create Sidebars).
    WIDGETS: Going to Appearance -> Widgets, in the custom sidebar “A” I placed the Widget “Custom Menu”, in the custom sidebar “B” I placed the Widget “Pages” and selected appropriate information to be displayed.
    PAGES: Went to “Pages”. In one Page, I selected to Display Sidebar Yes and I choose sidebar “A”. On another page I choose Sidebar “B”.
    TYPOGRAPHY: In order for the main content text to be super legible, I went into: Appearance -> Theme Options -> Typography -> Body Font Options, and I increased the font size to 20px as well as the line height to 40 px. I also changed Typography -> Header Font Options -> H5 Headings to font size 25px and line height 26 px.
    In the resulting pages, the main text as well as the header of the custom sidebar (which is an H5 heading) are as I wanted. The problem is with the text in the custom sidebars. It is the same font as the main text and because I increase the line height to 40px, they have too much white space between them. So, how can I fix that?

Viewing 8 replies - 1 through 8 (of 8 total)
  • hannah

    (@hannahritner)

    Hi,
    Are you able to post a link?

    Hannah

    Thread Starter Jas999

    (@jas999)

    No, still local.

    You can target sidebars with custom css like this:

    .sidebar {
font-size: 20px;
line-height:40px;
}

    Kadence Themes

    Thread Starter Jas999

    (@jas999)

    Amazing! This now applies to all sidebars. And I can even change other properties like the font by adding, for example ” font-family: Lora; ” after line-height!
    Now, if I want this to apply to a custom sidebar, lets say only to custom sidebar “A”, how would I proceed? I tried a few things without success…

    hannah

    (@hannahritner)

    You would need to select the page id rather than the sidebar id. You can see about finding page id’s here- https://www.youtube.com/watch?v=fLg2T1AvmFE

    Hannah

    Thread Starter Jas999

    (@jas999)

    Thanks. It is my page-id-2. By doing so, all the text on that page number 2, the main body as well as the sidebar, is the same.
    What I want is to change just the font of a the menu items in given custom sidebar.
    I tried to change the font, without luck, just for my custom sidebar called ” A “:

    .sidebar-a {
font-size: 20px;
line-height: 20px;
font-style: italic;
}

    So it wouldn’t work like that, for id 2 you would use css like this:

    .page-id-2 .sidebar {
font-size: 20px;
line-height: 20px;
font-style: italic;
}

    Kadence Themes

    Thread Starter Jas999

    (@jas999)

    Super! It works. I like your theme and your GREAT support so much, I just bought the Pinnacle Premium theme, as it has great options I would like to use!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Need Custom Sidebar text with different font’ is closed to new replies.