[Michael]

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

[Skandha]

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

Kind Regards,
Skandha

[Michael]

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.

[Skandha]

@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

[Michael]

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
}

[Michael]

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?

[Skandha]

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

Kind Regards,
Skandha

[Michael]

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?

[Skandha]

@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

[Michael]

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?

[Skandha]

@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

[Michael]

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)

[Skandha]

@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

[Michael]

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

[Skandha]

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

Kind Regards,
Skandha

[Author]

Posts