[Michael]

Item 1:

OK so I am still having the problem with the formatting of the block quotes.
example page: https://www.gayundah.info/reception-in-brisbane/

Note the red line down the left hand side, rather than the quote ” icon at the top of the quote.

So far I have this css added in the additional css section, per your previous responses.

/* 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;
}

/* indent blockquote text */
.wp-block-quote p {
    margin-left: 25px;
}

How can I fix this please?

Item 2:
Is it possible to have an image as the background in the block quotes? If so, how please?

Apology

I apologise for having to start a part 2, but previous thread was closed for replies. It said I still had posting privileges, but then gave an error re thread closed (I have a screenshot for you if you want it)

Cheers and thanks

[Skandha]

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

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

Replace the link with the link of the image you want as the background image.

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

[Michael]

That takes care of item 2: works perfectly thanks

What about item 1?
(the blockquote format)

[Skandha]

@landyvlad: Hello there,
I am afraid I am not able to understand the issue no 1. Can you please elaborate?

Kind Regards,
Skandha

[Michael]

It’s very confusing in fact:
Compare: https://www.gayundah.info/reception-in-brisbane/
With: https://www.gayundah.info/mutiny/

The first reflects all the CSS changes I have made, but still has the red line on the LHS of the quote.
The second doesn’t reflect ANY of the changes but has the quote as per the code you originally gave me for the “ symbol colour and position. The same is true of most pages on the site containing any block quotes.

[Michael]

This is the css I currently have in the ádditional css box.

/* 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 colour */
.wp-block-quote {
background-color: #ebf2f7;
}

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

[Skandha]

@landyvlad: Hello there,
The code doesn’t work for the blockquote in the page Mutiny because there is <header class="luna-data-header"> after the blockquote unlike in the page Reception in Brisbane where there is <p> tag.

You seem to have added the blockquote in the Munity page differently than the other page. Do you want the blockquote to have the same effect like in the Reception in Brisbane page?

Kind Regards,
Skandha

[Michael]

All blockquotes should be as per the reception in brisbane page’ OTHER than:

1. SHOULD NOTE Not have a border down the left hand side of the blockquote (that’s some sort of carry over from the previous Adventurous Pro theme)
2. SHOULD have the blockquote ‘quote’ symbol as per the mutiny page that is on LHS and in black as per the existing “additional css” code.

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

[Skandha]

@landyvlad: Hello there,
Can you please use the Quote Block in the Blocks section and no CSS will need to be added.

Edit a page => Add New Block => Text => Quote => Insert your text and Update the Page.

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

[Michael]

So I’d need to go and re-do every quote on the website?

[Michael]

So just checking – @Skandha do I need to redo every quote on the site individually to fix this?

[Skandha]

@landyvlad: Hello there,
If you use the Quote Block everywhere the above CSS Code will work or else you will need to add CSS Code for every Quote section.
I guess using the Quote Block is a better option.

Kind Regards,
Skandha

[Michael]

So for that do I need to convert each one to a block (many were done in the classic editor), and then select Gutenberg block type as quote? Or Is there a special way to choose the alchemist theme quote style?

[Skandha]

@landyvlad: Hello there,
You can use the Gutenberg Quote Block and that should work.

Kind Regards,
Skandha

[Michael]

It isn’t working – if I create a new block quote it has the line down the side.

[Michael]

Hello? As abive It isn’t working – if I create a new block quote it has the line down the side.

[Michael]

Hello? I’d appreciate some more guidance on this please? I need to resolve this problem as my website is looking poor at the moment due to this issue.

Also – Is there a reason for the delays in response to help threads on the catch themes forum recently?

[Skandha]

@landyvlad: Hello there,
Sorry for the late reply. Your reply email was in the spam folder and I missed it unfortunately.
Can you please let me know on which page you are having a line under the block quote?

Kind Regards,
Skandha

[Michael]

Not under the quote, but beside the quote (as per my comments above).

I’ve created this page and a created a quote using the standard gutenberg quote block.
https://www.gayundah.info/aaa-test/

as you can see, it’s not in the format that should appear.

Instead, there is a line down the LHS, there is no quote symbol at the top left hand side.

[Skandha]

@landyvlad: Hello there,
Your site doesn’t seem to be accessible at the moment. Can you please let me know when it is accessible so that I can look into the issue?

Kind Regards,
Skandha

[Author]

Posts