Problem changing heading level of post title

  • Resolved campg2003

    (@campg2003)


    5 years, 11 months ago

    Hi,
    There is a problem with heading level nesting in the wpspw_posts shortcut if the page where it is used uses h2 headings to separate sections. In this case the section headings are at the same level as the post title headings. This is inconvenient for screen reader users who want to skip to the next section by skipping to the next heading of a particular level. I am trying to modify the plugin to allow specification of the HTML tag used for each post title. This HTML element tag is hard-coded to h2 in templates/grid/design-[12]. I have added another parameter
    to the wpspw-post shortcode and pass it to the template. To make this work I changed the style sheet to remove references to h2:

    --- a/assets/css/bdpw-public.css
+++ b/assets/css/bdpw-public.css
@@ -59,7 +59,7 @@
 .wpspw-post-categories a:hover, .wpspw-post-categories a:focus{background: #333 !important;border-color: #333 !important;color: #fff !important;}
 
 .sp_wpspwpost_static h2, .sp_wpspwpost_slider h2 {margin: 5px 0 !important;line-height: 24px !important;padding-top: 0px !important;padding-bottom: 0px !important;}
-.sp_wpspwpost_static h2.wpspw-post-title a, .sp_wpspwpost_slider h2.wpspw-post-title a{font-size: 20px !important;line-height: 24px !important;}
+.sp_wpspwpost_static .wpspw-post-title a, .sp_wpspwpost_slider h2.wpspw-post-title a{font-size: 20px !important;line-height: 24px !important;}
 .wpspw-post-title a {text-decoration: none !important;border-bottom: 0px !important;}
 
 .wpspw-post-date {line-height: normal !important;padding: 5px 5px 5px 0;display: inline-block;text-transform: uppercase;color: #666;font-size: 12px;}
@@ -120,7 +120,9 @@
 .wpspw-pro-sp-static.wpspw-pro-sp-static{margin:0 0px;}
 /****************** Design-1 ********************/
 .sp_wpspwpost_static.wpspw-design-1 .wpspw-post-grid-content{background:#fff; border:1px solid #ddd;  float:left; width:100%;}
-.sp_wpspwpost_static.wpspw-design-1 .wpspw-post-grid-content h2 a{color:#444; text-decoration:none;}
+/* Replaced h2 with .wpspw-post-title so we can make the tag variable. */
+.sp_wpspwpost_static.wpspw-design-1 .wpspw-post-grid-content
+.wpspw-post-title a{color:#444; text-decoration:none;}
 .sp_wpspwpost_static.wpspw-design-1 .wpspw-post-grid-content .wpspw-post-title, 
 .sp_wpspwpost_static.wpspw-design-1 .wpspw-post-grid-content .wpspw-post-date, 
 .sp_wpspwpost_static.wpspw-design-1 .wpspw-post-grid-content .wpspw-post-content {padding:0 15px;float: none;}

    When I run this with h2 output appears as the unmodified version. When I change to h3 the h2 text gets larger. Since I changed the stylesheet to depend only on .wpspw-post-title, there is another style rule that is affecting h2. Can you tell me what it is?

    For my purposes, it is okay that h3 in the posts list looks the same as h2. It is smaller than the h2 that is outside the posts list.

    I have tried to determine the controlling CSS rule with Google Chrome Developer Tools, but I’m using the JAWS screen reader, and accessibility of Devtools isn’t the greatest.

    Thanks.

    Gary

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Anoop Ranawat

    (@anoopranawat)

    Hello,

    No need to change shortcode if you want to change the heading font size
    use this CSS rule like this way
    .sp_wpspwpost_static .wpspw-post-title a{ font-size: 20px !important; }
    add this CSS in your active theme -> style.css bottom

    Thanks

    • This reply was modified 5 years, 11 months ago by Anoop Ranawat.
    Thread Starter campg2003

    (@campg2003)

    I modified the shortcode because I want to modify which HTML element it uses for the title. A screen reader can jump to headings based on their level. If I have h2 sections on the page and the post titles are also h2, then the screen reader command to jump to the next h2 heading hits every post. If I change the post titles to, say, h3, then the jump to next h2 keystroke jumps past the posts to the next section. I could also change my section titles to h1, but h1 is already used on the page. I was asking about the controlling CSS rule because I did not expect a change, so must have missed something.
    Adding the ability to specify the post title tag makes the shortcode a bit more flexible.
    Thanks.
    Gary

    Plugin Author Anoop Ranawat

    (@anoopranawat)

    Hello,

    Did you mean when you adding CSS then nothing effect?
    You can add CSS for section h2 And also for blog title h2 its possible.
    Please find our site and join our live chat our technical team will help you
    because we are not able to get what you actually want.

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Problem changing heading level of post title’ is closed to new replies.