Nonprofit Demo

Support
#1

Hello, I’m using pro but I want to design something similar to nonprofit demo.

  1. How can I make the slider, the menu bar to be in a container like the content body,

  2. How can I style and position the coloured lines under texts

  3. How can I achieve the double border lines in “THE DETAILS” section,

Thanks

#2

Hello @Teeebest,

Thanks for asking. :slight_smile:

Can you please share website URL for us to provide tailored solution?

Thanks.

#3

Hello Rai, I am still at the foundational stage of development. url is “goodlifeafrica.cloudaccess.host”

As stated earlier, all i need is a brief explanation to my 3 questions using the nonprofit demo as a case study.

It’s the NONPROFIT demo homepage I want to reproduce. Thanks.

#4

Hey @Teeebest,

Your Site Layout needs to be Boxed. You can set that in Appearance > Theme Options > Layout and Design.

This uses the Classic Custom Headline element with custom HTML and CSS.

Here’s the HTML

<span class="h-sup">The Details</span>See exactly how we accomplish our goals.<hr class="accent-2">

Here’s the CSS

.h-sup {
  display: block;
  margin-right: -0.15em;
  margin-bottom: 1em;
  font-family: "Open Sans", sans-serif;
  font-size: 0.375em;
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 1 !important;
  text-transform: uppercase;
  color: inherit;
}

.h-custom-headline hr {
  width: 50%;
  height: 2px;
  max-width: 180px;
  margin: 1em 0 0;
  font-size: 0.375em;
  background-color: #fd7563;
}

.h-custom-headline.cs-ta-center hr {
  margin-left: auto;
  margin-right: auto;
}

The position is controlled by the Text Align option in the Custom Headline Element.

Set your Column’s border to Double.

#5

Thanks for your response, I am sorry if my quetions are dumb.

The coloured line under text appeared like 4 times on the home. After pasting the css you sent, I dont know where to post the edited css for the other areas using the Effect.

Open Sans & Prata family fonts were both used. There is only open sans in the css code. how and where can I insert Prata font family as used in the demo.

Thanks as always.

#6

Hi There,

Here’s a simpler one, please add this to Theme Options > CSS


.my-accent {
	width: 50%;
    height: 2px;
    max-width: 180px;
    margin: 1em auto 0;
	background-color: #fd7563;
}

Then every time you want a line under a headline just append this line of code to it.

<hr class="my-accent">

You need to define the Prata font family first on Font Manager, and then assign that font as your Headline font. Please read this post for more info about the Font Manager.

Hope it helps,
Cheers!

#7

Hello,
Thanks for the response. The space between the line and the text is too much. how can I reduce it please?

#8

Hi There,

See the custom CSS code I’ve provided above, specifically this line:

margin: 1em auto 0;

That 1em is the top margin which is the gap that you’re seeing, try adjusting that to 0.5em; or bring all the way to 0;

Cheers!

#9

Thanks,
My Final problem is positioning the line. How can I shift the line to the left or right please?

Thanks for your time.

#10

Hi There,

If you need the line to the left, please update the margin to this:

margin: 0 auto 0 0;

If you need it to the right, update it to this:

margin: 0 0 0 auto;

CSS – margin:auto – How it Works

Hope it helps,
Cheers!

#11

Hello,
Thanks so much for the support. Please I need help removing the red background in the creative CTA below.

Thanks as always.

#12

Hi There,

Created CTA element provides you background-color option. Set it to transparent if you dont want a background-color on your CTA.


If you have additional query, we kindly ask you to create a new thread as this one is getting long and drifted off from the original topic.

Thanks,

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.