Sydney Services Button Color Change

Hi

Loving amending Sydney but I have come to a bit of a sto and after an hour of searching the site hae failed miserably to find the solution.

http://www.ezdata.co.uk/ - This is my site

I have been unable to find the resolutions for my issues below so am hoping for some guidance.:-

  1. Have the Contact Us with an Orange block permantly around it - like this http://www.tableau.com/

  2. I want the See More Services Button and the Contact Us Button on the Ethos Page to be Orange with white Writing like the Learn More Button on the Front Page.

  3. Embolden the Services Titles SIMS.net, System Consultancy etc.

  4. I click on Learn More from the Front Page and the Our Services Section stops where I want it to but I click on See More Services and the Waht Else We Provide Page goes too far. I am sure it is a padding issue but I just can’ figure it out. How do I correct that.

Thanks for any help you can give me.

Chris

Hello there,

You can add all custom css code below with this plugin https://wordpress.org/plugins/simple-custom-css/

  1. Apply custom css code below:
#mega-menu-wrap-primary #mega-menu-primary > li#mega-menu-item-180 > a.mega-menu-link {
    background: #f8a10a;
    background: -webkit-gradient(linear, left top, left bottom, from(#f60), to(#f8a10a));
    background: -moz-linear-gradient(top, #f60, #f8a10a);
    background: -ms-linear-gradient(top, #f60, #f8a10a);
    background: -o-linear-gradient(top, #f60, #f8a10a);
    background: linear-gradient(to bottom, #f60, #f8a10a);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFF6600', endColorstr='#FFF8A10A');
    color: #fff;
    font-weight: normal;
    text-decoration: none;
    border-color: #fff;
}
  1. Use custom css code below:
body.page.page-id-77 .roll-button.border {
    border-color: #ff6600;
    background-color: #ff6600;
    color: #ffffff !important;
}

body.page.page-id-77 .roll-button:hover {
    background-color: transparent;
    color: #ff6600 !important;
}
  1. Apply following css:
.widget_sydney_services_type_b .roll-icon-list .content h3 {
    font-weight: bold;
}
  1. Anchor ID is not correct use #pg-51-1 for See more services button

All the Best!

Hi Dimi

That is absolutely amazing and put in a way that I can follow and learn from. I am just about where I want to be but have a couple of more issues if you can help.

  1. I would like the Space between the Services less than it currently is as I cannot see the More Services Button on the Screen and I would like it to be visible at the bottom of the screen - Closing the Space between the Services Should Solve this.

  2. The Orange Contact Us Button - is it Possible to have the Same Styling as the Call to Action Buttons with Rounded Coirnersand be the Full Height of the Menu.

  3. The Call to Action for See More Services needs to be the Same format and Color of the rest of the Buttons. I was thinking of just having a text link as it may look like too many buttons.

Thanks so much for your help. Witha bit of luck I will get to launch my business this week.

Chris

Hello again Chirs,

  1. Set margin to 0 (default is 30px), but it will be ok to set it to 0 since holding element also have bottom margin of 10px. Use custom code below:
.widget_sydney_services_type_b .roll-icon-list .list-item {
    margin-bottom: 0;
}
  1. Add border radius of 3px, so change your current code like this:
#mega-menu-wrap-primary #mega-menu-primary > li#mega-menu-item-180 > a.mega-menu-link {
    background: #fF6600;
    color: #fff;
    font-weight: normal;
    text-decoration: none;
    border-color: #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}

Contact button is already full height of the menu, but menu is pushed down with some padding, in order to be displayed in line with the logo on the left.

  1. Click for More Services is currently set to be link. If you change your mind, set it to button again, and post new reply.

Best Regards!

Oh My Dimi

You are the man.

That is brilliant.

I have decide to have my Services List in straight block without any buttons or links as I think it looks better.

The last 2 issues that I am having are:-

  1. Click on the How We Help Button on the Front Page, then Click on the Ethos Link and then Click Services Link. The Page goes too high - why?

  2. On the Ethos Page the Menu Bar isn’t Sticky and moves, is there a setting for this?

One more usability feature I would like is:- The Contact form on here has watermarks, how do I do that as I cannot seem to figure it out and I have downloaded and imported it. http://demo.athemes.com/sydney/demo-3/

I can’t thank you enough.

Chris

Hi Chris,

  1. Theme does not support anchoring from other pages unfortunately. Anchor links have to target IDs only on current page. You should set SERVICES link to point domain anme without anchor, and then users have to click on slider button in order to scroll to section below.

  2. Sticky header is global option, and it should work for all pages. Maybe issue is in some caching plugin which you are using, try to disable these plugins and test this again. In addition, you can apply custom code below in order to fix this on Ethos page:

.page-id-77 .site-header.fixed {
    position: fixed !important;
}

Best Regards!

Hi Dimi

2 Doesnt work as the top line of text is lost.

Also, did you have any ideas on this:-

One more usability feature I would like is:- The Contact form on here has watermarks, how do I do that as I cannot seem to figure it out and I have downloaded and imported it. http://demo.athemes.com/sydney/demo-3/

As for the Services Page, I will just create a Services Page rather than going back to the homepage.

Thanks
Chris

Hi again Chris,

Yes, I see, for Ethos page, you can add text widget before that 3 columns of text, and you can add few non breaking spaces, or few br tags:
<br><br><br><br>

OR you can set top margin for row,
OR you can use custom css code below to set top margin:

div#pg-77-0 {
    margin-top: 100px;
}

If by watermarks you are referring to placeholder text, please see CF7 documentation on this http://contactform7.com/setting-placeholder-text/ and change your CF7 for accordingly.

Best Regards!

Hi Dimi

Thanks so much - I used this div#pg-77-0 {
margin-top: 100px;
} and changed to 75px and all was good.

Thanks for the Contact 7 Link.

Thanks for all your help.

Chris

You’re welcome Chris,

And thank you for using Sydney Theme.

All the Best!