Viewing 15 posts - 21 through 35 (of 35 total)
  • Author
    Posts
  • #282412
    Michael
    Participant

    Weird I just accessed through anonymous browser and got a 401 first time but refreshed and it worked.

    #282470
    Skandha
    Keymaster

    @landyvlad: Hello there,
    Do you want the blockquote to be link in this page?

    Kind Regards,
    Skandha

    #282495
    Michael
    Participant

    Similar to that yes, but as per the previous code you provided so that the quote symbol is to the left and a different colour.

    #283539
    Skandha
    Keymaster

    @landyvlad: Hello there,
    Please remove the CSS you have earlier for blockquote and add the following CSS Code.

    .wp-block-quote::before {
        content: "\201C" !important;
    }
    .wp-block-quote {
        border: unset;
        padding: 50px 0 0 0 !important;
    }

    Let me know if this works out!
    Kind Regards,
    Skandha

    #283759
    Michael
    Participant

    This is what I currently have – which part should I replace with the new?

    /* Menu item Hover & Active Text Color */
    .site-navigation li a:hover,
    .site-navigation li a:focus,
    .site-navigation .current_page_item > a,
    .site-navigation .current_page_item > a {
    color: #ff8000;
    }


    @media
    screen and (min-width: 64em) {
    /* Menu Background Color */
    .site-primary-menu,
    .site-navigation ul ul,
    .site-navigation ul ul li,
    .search-container {
    background-color: #000;
    }
    /* Menu Text Color */
    .site-navigation a,
    .social-navigation a,
    .menu-search-main-toggle {
    color: #fff;
    }

    /* Sub-menu Border and Color */
    .site-navigation .menu-item-has-children > ul,
    .site-navigation .page_item_has_children > ul {
    border-top: 3px solid #ff8000;
    }
    }

    /* blockquote quotation mark */
    blockquote::before {
    left: 0% !important;
    color: #000000 !important;
    font-size: 40px !important;
    font-family: Arial !important;
    font-weight: bolder;
    }

    /* blockquote text */
    blockquote {
    font-size: 20px;
    font-family: Georgia;
    font-weight: normal;
    color: #000000;
    text-align: left;
    }

    /* padding inside blockquote */
    .wp-block-quote p {
    padding-top: 15px;
    padding-right: 20px;
    padding-bottom: 15px;
    padding-left: 25px;
    }

    /* blockquote background image */
    /*
    .wp-block-quote {
    background-image: url(‘https://www.gayundah.info/wp-content/uploads/2015/05/aerial-photo-arrowed-web.jpg’);
    }
    */

    /* blockquote background colour */
    .wp-block-quote {
    background-color: #ebf2f7;
    }

    /* blockquote border radius */
    .wp-block-quote {
    border-radius: 50px 20px;align-content
    }

    #283762
    Michael
    Participant

    I’ve commented out the parts I though relevant so additional css now appears as follows:

    
    /* Menu item Hover & Active Text Color */
    .site-navigation li a:hover,
    .site-navigation li a:focus,
    .site-navigation .current_page_item > a,
    .site-navigation .current_page_item > a {
        color: #ff8000;
    }
    
    @media screen and (min-width: 64em) {
    	/* Menu Background Color */
    	.site-primary-menu,
    	.site-navigation ul ul,
    	.site-navigation ul ul li,
    	.search-container {
    		background-color: #000;
    	}
    	/* Menu Text Color */
    	.site-navigation a,
    	.social-navigation a, 
    	.menu-search-main-toggle {
    	    color: #fff;
    	}
    
    	/* Sub-menu Border and Color */
    	.site-navigation .menu-item-has-children > ul,
    	.site-navigation .page_item_has_children > ul {
    		border-top: 3px solid #ff8000;
    	}
    }
    /*
    /* blockquote quotation mark 
    blockquote::before {
        left: 0% !important;
        color: #000000 !important;
        font-size: 40px !important;
        font-family: Arial !important;
    		font-weight: bolder;	
    }
    */
    /* blockquote text 
    blockquote {
        font-size: 20px;
        font-family: Georgia;
       	font-weight: normal; 
    		color: #000000;
        text-align: left;
    }
    */
    .wp-block-quote::before {
        content: "\201C" !important;
    }
    .wp-block-quote {
        border: unset;
        padding: 50px 0 0 0 !important;
    }
    
    /* padding inside blockquote */
    .wp-block-quote p {
      padding-top: 15px;
      padding-right: 20px;
      padding-bottom: 15px;
      padding-left: 25px;
    }
    
    /* blockquote background image */
    /*
    .wp-block-quote {
        background-image: url('https://www.gayundah.info/wp-content/uploads/2015/05/aerial-photo-arrowed-web.jpg');
    }
    */
    
    /* blockquote background colour */
    .wp-block-quote {
    background-color: #ebf2f7;
    }
    
    /* blockquote border radius */
    .wp-block-quote {
    border-radius: 50px 20px;align-content	
    }
    
    

    and looking at the quotes here (and almost everywhere else) it’s consistent.
    https://www.gayundah.info/government-requirement/

    however on this page the quotes are the same as above except they have a background colour which I prefer.
    https://www.gayundah.info/reception-in-brisbane/
    I’m not sure why this page is different? and howo we can get all pages to have that quote background please?

    #283785
    Skandha
    Keymaster

    @landyvlad: Hello there,
    I checked your site you seem to have figured it out. Is the issue resolved?

    Kind Regards,
    Skandha

    #284450
    Michael
    Participant

    Noit no sorted yet.

    As stated above

    looking at the quotes here (and almost everywhere else) it’s consistent.
    https://www.gayundah.info/government-requirement/

    however on this page the quotes are the same as above except they have a background colour which I prefer.
    https://www.gayundah.info/reception-in-brisbane/
    I’m not sure why this page is different?

    How can I get all pages to have that quote background please?

    #284477
    Skandha
    Keymaster

    @landyvlad: Hello there,
    Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    blockquote {
        background-color: #ebf2f7;
        border-radius: 50px;
        padding: 50px !important;
    }

    Let me know if this makes the blockquote uniform on all pages.
    Kind Regards,
    Skandha

    #284615
    Michael
    Participant

    OK I added that to the end of the existing css noted above.
    Works! Thanks.

    (Do I need to remove any of the .wp-block-quote code? Or should I leave it as is?

    The only change I’d like now is for the actual ” symbol at the top of the quote to be on the left hand side, and coloured black.

    How do I achieve that please?

    #284626
    Skandha
    Keymaster


    @landyvlad
    : Hello there,
    Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    blockquote::before {
        color: #000;
        left: unset;
    }
    .wp-block-quote::before {
        color: #000;
        left: 5%;
    }

    You don’t need to remove any code except for the code you have commented

    Let me know if this works out!
    Kind Regards,
    Skandha

    #284925
    Michael
    Participant

    Great thank you.

    One LAST question for this thread – is it possible to actually reduce the size (in points) of that quote symbol?
    (If not that’s OK just wondering)

    #284927
    Skandha
    Keymaster


    @landyvlad
    : Hello there,
    Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    blockquote::before, .wp-block-quote::before {
        font-size: 68px;
    }

    You can change the font size according to your choice.
    Let me know if this works out!
    Kind Regards,
    Skandha

    #284932
    Michael
    Participant

    Thank you.
    This matter is now resolved you can close the thread. Thank you for your assistance.

    #284942
    Skandha
    Keymaster

    @landyvlad: Glad the issue is resolved. Have a good day! 🙂

    Kind Regards,
    Skandha

Viewing 15 posts - 21 through 35 (of 35 total)
  • The topic ‘How to change font/design for blockquotes PART 2’ is closed to new replies.