Spacing, Backgrounds, Buttons and more!

Hey arnacampbell,
Welcome and thanks for choosing Enfold, lets take a look at your questions…
HEADER:
– I’d like the phone number in the header with the social icons.
To move the phone & social I adjusted at to Enfold Theme Options > Header > Extra Elements > Header Social Icons:

– I’d like a button on the left, just like https://www.campbellhillsguestranch.com
To create this button I added this css to your Enfold Theme Options > General Styling > Quick CSS field:

@media only screen and (min-width: 767px) { 
a.res-button,a.res-button:visited {
    display: inline-block;
    font: 400 16px/32px 'EB Garamond',"Times New Roman",Georgia,serif;
    text-decoration: none;
    text-align: center;
    color: #fff;
    padding: 0 15px;
    margin: 0 auto;
    min-width: 24px;
    letter-spacing: .05em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px dashed #33270E;
    background-image: url(//static.campbellhillsguestranch.com/themes/CampBell17/images/layout/leatherBG-light.jpg);
    background-repeat: repeat-x;
    background-position: left center;
    float: left !important;
    left: 10px;
    top: 60px;
    position: absolute;
    transition: transform .3s,box-shadow .3s;
}
}

*note you will need to adjust the image url when you remove the other theme.
Then a added this button code to Enfold Theme Options > Header > Extra Elements > Phone Number or small info text:

<a class="res-button" href="https://www.campbellhillsguestranch.com/site/guest-ranch-vacations/rates-and-availability.html">Reservations</a>

– Can the drop down menu have the same background as the header? With white text?
To add the background-image to your sub-menu, I added this css:

.header_color .main_menu ul ul {background: #e4d7bf url(https://static.campbellhillsguestranch.com/themes/CampBell17/images/layout/leatherBG.jpg) no-repeat right top !important;}

.header_color .main_menu ul ul.sub-menu li a { background: transparent; }

.header_color .main_menu ul ul.sub-menu li a:hover { background-color:rgba(250,250,250,0.3)!important;}

*again adjust the image url
– Rope separator with drop shadow (same as https://www.campbellhillsguestranch.com). At the moment, I’ve just attached the rope to the background header image but it leaves a space. I’d like it to overlap.
I added the box-shadow to your header image:

.header_color .header_bg {
box-shadow: 0 4px 10px 2px rgba(0,0,0,.4);
}

It still isn’t overlapping correctly, but I will have to research this some more.
So other than the overlap, please check these before we move on to the next section.

Best regards,
Mike

Hi,

Great, glad we could help :-)

Please let us know if you should need any further help on the topic or if we can close it.

Best regards,
Rikard

Hi,
Thank you :)
FOOTER:
– Rope separator with drop shadow, same as header and https://www.campbellhillsguestranch.com.
For the shadow I added:

#footer {
box-shadow: 0px -1px 14px 4px rgba(0,0,0,.4);
}

– Can the social icons be in the footer, like https://www.campbellhillsguestranch.com?
the social icons are built into the socket, below the footer, I enabled so you can see at:
Enfold Theme Options > Footer > Default Footer Widgets & Socket Settings
– Can I add a button into the footer?
I added a button into your third footer widget area, HTML block. Notice the class is different than the top button so it will stay in the footer.

<a class="footer-res-button" href="https://www.campbellhillsguestranch.com/site/guest-ranch-vacations/rates-and-availability.html">Reservations</a>

the css:

a.footer-res-button,a.footer-res-button:visited {
    display: inline-block;
    font: 400 16px/32px 'EB Garamond',"Times New Roman",Georgia,serif;
    text-decoration: none;
    text-align: center;
    color: #fff;
    padding: 0 15px;
    margin: 0 auto;
    min-width: 24px;
    letter-spacing: .05em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px dashed #33270E;
    background-image: url(//static.campbellhillsguestranch.com/themes/CampBell17/images/layout/leatherBG-light.jpg);
    background-repeat: repeat-x;
    background-position: left center;
    transition: transform .3s,box-shadow .3s;
}

BUTTONS:
– Can I customize the buttons to have a particular background image (not just colour)? They can all be the same, but Id like to use an image, like https://www.campbellhillsguestranch.com/.
I found buttons on the activity page and on the contact page, so I used them as the models for your buttons in which this css will add the background image:

a.avia-button {
    font: 400 16px/32px 'EB Garamond',"Times New Roman",Georgia,serif!important; 
    color: #fff!important; 
    border-style: none!important; 
    background-color: #e4d7bf !important;
    background-image: url(//static.campbellhillsguestranch.com/themes/CampBell17/images/layout/leatherBG-light.jpg)!important; 
    background-repeat: repeat-x;
    background-position: left center;
}

FORM:
– Can I customize the size of the words and spacing between form elements?
I only see a contact form on your site, so to change the font size please try:

#top label {
    font-size: 0.92em!important; 
}

I didn’t apply, this is the size it is now, try changing to “1.2em” or more to suit.
as for the form spacing I assume you mean to the right of “first name” & “email” so they are not touching:

p#element_avia_1_1,p#element_avia_3_1 {
padding-right: 10px;
}

I didn’t apply, please adjust to suit.

OK, so lets see how these look, we still need to fix the “overlapping”.
Hopefully, these will be ok and then we can tackle the “Body” :)

Best regards,
Mike

Hi,
BODY:
– How can I make the title appear below the slider? eg. https://campbel3.mywhc.ca/activities/. Though I will most likely be using Layerslider WP, not the Slider as per this page.
The title seems to be below the slider now, is it different when using the layerslider, can you create an example?

– Slider – I’d also like the rope to appear at the bottom of the slider (overlapping) like https://www.campbellhillsguestranch.com/site/activities/children-and-horses.html
This is done with this css:

#topNav:after, header:after {
    content: "";
    position: absolute;
    bottom: -5px;
    height: 18px;
    background: url(//static.campbellhillsguestranch.com/themes/CampBell17/images/layout/rope1.png) center top repeat;
    width: 100%;
    left: 0;
    right: 0;
    transition: all .5s ease;
    z-index: 110;
}

We probably should do this once you know what slider you are going to use.

– There is a huge space between the title and the first elements. How can that be reduced?
Do you mean between the slider and the title? Please see screenshot in Private Content area.

– Bullet points – can I make a custom bullet point? like https://www.campbellhillsguestranch.com/site/guest-ranch-vacations/packing-list.html
Please try the Icon list element:

Here is a video: https://youtu.be/arXUypFtzCk

– Gallery – I want to remove the white border. I also want to remove the hover captions.
Sorry, on the https://campbel3.mywhc.ca/gallery/ page I don’t see any hover captions or a white boarder, perhaps I’m looking at the wrong page?

– Masonry Gallery – I want a transparent background. Just like https://www.campbellhillsguestranch.com/site/activities/children-and-horses.html. It is currently https://campbel3.mywhc.ca/activities/children-and-horses/.
Try this code in the General Styling > Quick CSS field:

.main_color .av-masonry {
    background-color: transparent!important; 
}

– Masonry Gallery – Is there an option for a more stylish setup? like two at the top and three at the bottom?
A more stylish setup is to use the “Perfect Automatic Masonry” option where most images get the same size, only very wide images get twice the width and very high images get twice the height. Yet you would need to upload some of the images taller and some wider. Similar to this: https://kriesi.at/themes/enfold/shortcodes/masonry-gallery/

– Grid – Can I customize the grid colours/background? Like https://www.campbellhillsguestranch.com/site/guest-ranch-vacations/rates-and-availability.html
I think you mean “tables” we can assist with css, once you create a table.

Best regards,
Mike

Hi,
For the mobile menu, I changed the code from:

.header_color .main_menu ul ul {background: #e4d7bf url(https://static.campbellhillsguestranch.com/themes/CampBell17/images/layout/leatherBG.jpg) no-repeat right top !important;}

to this…

.header_color .main_menu ul ul,.header_color .main_menu ul li {background: #e4d7bf url(https://static.campbellhillsguestranch.com/themes/CampBell17/images/layout/leatherBG.jpg) no-repeat right top !important;}

For the header logo I changed your code to this….

@media only screen and (max-width: 767px) { 
.av-logo-container .logo img {
    margin-bottom: 20px !important;
} 
}

Best regards,
Mike

Hi,
Ok, removed my menu change, and added this code instead:

#av-burger-menu-ul li {background: #e4d7bf url(https://static.campbellhillsguestranch.com/themes/CampBell17/images/layout/leatherBG.jpg) no-repeat right top !important;}

Please check

Best regards,
Mike

Hi,
I adjusted the forms and added the page ID’s to the rules so there won’t be a chance of cross errors in the future. I only found the two forms, but I thought there was another, unless one had changed. Please check and let us know if there is another form.

.page-id-37 p#element_avia_1_1,.page-id-37 p#element_avia_3_1,.page-id-37 p#element_avia_5_1,.page-id-37 p#element_avia_7_1,.page-id-37 p#element_avia_8_1,.page-id-37 p#element_avia_9_1,.page-id-45 p#element_avia_3_1,.page-id-45 p#element_avia_1_1  {
padding-right: 10px;
}

Best regards,
Mike