How to format paragraph, accordion, and image banner?

[ShteebleGuy]

I love your theme, but can’t get certain elements to format properly on a sandbox site. Until I can figure this out I’m afraid I won’t be able to use it.

In particular:

1) I’ve split the top paragraph of text into two, and even verified in the ‘text’ editor that the   tag was in place. Every time I save and update though, it puts all of the paragraph text into one paragraph and ignores the space

2) I’d like to get my FAQ accordion to fit within some kind of container so that the image is full width but the accordion is not. How do I do that? Also, how to I get the accordion background to be white so that it shows up against the colored background?

3)I’d like to format the text and button in my image banner at the bottom right so that they don’t overlap with the guy in the photo. How do I adjust the text placement within that image banner?

Thanks so much. Overall this is a wonderful theme. If I can get the elements to format and fit properly it would easily become my go-to theme for future projects!

Thanks

[Kyle – SUPPORT]

Hi

1) This is fixed in the 1.6 update that we pushed last night 🙂

2) You can add the accordion within a row, and add your image to the row background. If you set this up then I can provide any custom css changes you need to make

3) You could add this to your custom css:

.image-banner-content.content-left {
  padding-right: 5%!important;
  margin-bottom: 0!important;
}

– Kyle

[ShteebleGuy]

Thanks so much Kyle for your quick response!

2) The way you suggested – the accordion within a row and the image as the background to the row – is how I had it originally set up. Please feel free to check it out yourself in our install.

3) Do you have any knowledgebase or other article on best practices for using custom CSS with your themes?

As an aside, I’ve used the Visual Composer plugin in the past and one thing that it does that I’m really missing on Cardinal is the ability to place a “container” in a row element or in a column division. That makes things much easier to contain within a placeholder. Do you have such a capability that I’m missing in the documentation or plans to add such capability?

Thanks again, and your responsiveness bring a lot of confidence!

[Kyle – SUPPORT]

Hi

2) Looks like you have the row content to full width instead of standard width? Please check your row settings. For the background add this to your custom css:

.spb_accordion_section.group {
  background-color: #ffffff;
}

3) You can add custom css to Theme Options > Custom CSS

Not sure what you are referring to about placing a ‘container’? You can use rows and columns for flexible layouts, you can also put columns within your rows, not sure what other option you would need?

– Kyle

[ShteebleGuy]

Wow – you’re quick!!!

2) I’ve added your custom CSS and that looks a lot better, but now the white background is evenly distributed on all borders except for the left. I’ve tried to add padding through custom CSS but that didn’t do anything.

In terms of the container, you are correct that I can but columns in rows. What Visual Composer added was the ability to set margins, so for example I could shrink down the image at the bottom right of my page by -30px on each side. Is the only way to do that through custom CSS?

Also, if I only wanted to make that image banner element -30px on all sides, but otherwise leave every other image banner by its original defaults, I’d imagine I’d have to add a custom class name and then add custom css for the class. I didn’t see any knowledgebase article on that. Would I simply put “maimo_image” (for example) in the “Extra Class Name” field and then add custom CSS that would read:

.maimo_image {
margin: -30px;
}

Any documentation you can give me on better utilizing custom CSS with the theme would be much appreciated!

[Kyle – SUPPORT]

Please change the css to:

.spb_accordion_section.group {
  background-color: #ffffff;
  padding: 10px 20px;
}
.spb_accordion .spb_accordion_section > h4 a {
  width: 95%;
}

Yes you are correct with what you say, you would need to do it with CSS. Adding margin/padding to columns is not something we’ve looked into yet as we didn’t want to make it too difficult for WordPress rookies, but it may be something we look at in the future

– Kyle

[ShteebleGuy]

I must be doing something wrong with the “Extra Class Name”. I’ve attached a screenshot of the class name I assigned and my code reads:

.image-banner-content.content-left .maimo {
padding-right: 5%!important;
margin-bottom: 0!important;
}

No luck. It’s not formatting properly. What am I doing wrong?

Can you recommend a resource on using your “Extra Class Name” with custom CSS.

Thanks again for all of your quick replies!

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

It’s probably not the correct selector, how do you know it’s

.image-banner-content.content-left

Also, I can’t see the class on your image banner? (see screenshot)

– Kyle

Attachments:

You must be logged in to view attached files.

[ShteebleGuy]

Sorry Kyle,

I had deleted that additional class in the afternoon EST so that the image box could format properly.

I’d be deeply appreciative if you’d point me to some sort of documentation or resource that will give me the details of using Extra Class Names in conjunction with Custom CSS to extend the core markup tools provided by the Cardinal theme.

Once I’ve reviewed those materials I won’t have to bother you;-)

Thanks!!

[Kyle – SUPPORT]

All you need to do it use the extra class for e.g. maimo and then use the selector for your custom css, for e.g.:

.maimo {
padding-right: 5%!important;
margin-bottom: 0!important;
}

– Kyle

[ShteebleGuy]

How will the CSS know that its a custom class for the image banner? Will it detect that I’m creating a custom class on the image banner asset and then add the “.maimo” selector to the image banner CSS?

Also, when I enter the class in the “Extra Class Name” field, if I wanted a class of maimo for example, do I enter “maimo” or “.maimo”?

Thanks Kyle; your responsiveness is off the charts!!

[Kyle – SUPPORT]

If you add a class to your image banner asset then the class will be added into the code for the image banner, so that it will use your css.

And yes, you only need to add the class without the . Only add the dot in your stylesheet

– Kyle

[ShteebleGuy]

Got it. Very helpful.

Incidentally, how to I upload an Avatar picture for my user profile?

Thanks!

[Kyle – SUPPORT]

You need to use https://gravatar.com/

– Kyle