Could i have some help with CSS on site please?

Hi,
I need some help resolving a few visual things on this website
Domain -

Change 1: Footer credits - http://take.ms/HcCYx
Change 2: Re-create the cloud footer effect (image attached) + Add the 4 links into the subdomain (each to open in new page when clicked) - http://take.ms/P1CyO
Change 3: Centre the "Add to Cart & Upload files" button + increase strength of separating line (change colour to darker) - http://take.ms/kEFJr

Domain - http://tinyurl.com/ounlhnf

Support Access is open

Thanks

Tom

  • Predrag Dubajic

    Hey Tom,

    Hope you're well :slight_smile:

    Change 1: Footer credits - http://take.ms/HcCYx

    I've added this CSS code to your custom CSS field that should do the trick:

    /*hide footer theme info*/
    .col-full .site-info {
    	height: 23px;
        overflow-y: hidden;
    }

    Add the 4 links into the subdomain (each to open in new page when clicked)

    You would need to edit your theme, preferably child theme, footer.php and add this code:

    <div class="custom-links-holder">
    	<a href="URL1" class="custom-link custom-link-1" target="_blank">TEXT ONE</a>
    	<a href="URL2" class="custom-link custom-link-2" target="_blank">TEXT TWO</a>
    	<a href="URL3" class="custom-link custom-link-3" target="_blank">TEXT THREE</a>
    	<a href="URL4" class="custom-link custom-link-4" target="_blank">TEXT FOUR</a>
    </div>

    Change URL's and text for links.

    Re-create the cloud footer effect (image attached)

    Adding this CSS code should work for this:

    .site-footer {
    	position: relative;
    }
    
    .site-footer:before {
        content: url(IMAGE_URL);
        display: block;
        position: absolute;
        top: -120px;
        text-align: center;
        width: 100%;
    }

    For IMAGE_URL enter the url of cloud image you want to use and adjust top value to position the cloud.

    Centre the "Add to Cart & Upload files" button

    Add this CSS to center the button:

    .single-product div.product form.cart .button {
        float: none;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    increase strength of separating line (change colour to darker)

    For border use this CSS:

    .woocommerce-tabs ul.tabs li {
    	border-bottom: 1px dotted rgba(0, 0, 0, 0.58);
    }

    0.58 is opacity value, you can change it to further adjust your line strength.

    Best regards,
    Predrag

  • Tom

    Hi Predrag,

    Thanks very much for those Had some success with those changes and few issues please can you help me further:

    - 1 - Footer credits - Perfect
    - 2 - Add 4 links - added this http://take.ms/zDLJo and they are showing in the bottom of the page here - http://take.ms/6ebiS While it is displaying the links :slight_smile: they unfortunately are not linking properly when clicked it says "Oops! That page cant be found." also the links are located in the bottom left of page. Can the be Centred and moved so they are in a similar position as the main site ?
    - 3 Cloud effect added successfully, just having some issues with its position, When in Firefox (after some adjustment to numbers it looks great, but when tested in different browsers there are some issues with spacing.
    - 4 - Centre the add to cart button (perfect but the button changed colour to red can it be green please?) + Lines separators - Perfect

    Thanks again

    Tom

  • Adam Czajczyk

    Hey Tom,

    I hope you're well and don't mind me jumping into this conversation :slight_smile:

    - 2 - Add 4 links - added this http://take.ms/zDLJo and they are showing in the bottom of the page here - http://take.ms/6ebiS While it is displaying the links :slight_smile: they unfortunately are not linking properly when clicked it says "Oops! That page cant be found."

    That's because URLs should be used other way here. Instead of:

    <a href="URL1" class="https://google.com" target="_blank">TEXT ONE</a>

    it should be

    <a href="https//google.com" class="custom-link custom-link-1" target="_blank">TEXT ONE</a>

    This will fix the "Oops! That page cannot be find" error and will let you address those link with CSS.

    also the links are located in the bottom left of page. Can the be Centred and moved so they are in a similar position as the main site ?

    Please move entire block of code (that's marked with red border on your image) from where it is now to above this line:

    <footer id="colophon"....

    This will move links up. In order to put center them, add this CSS code to the Custom CSS filed in your dashboard:

    .custom-links-holder {width:100%;text-align:center;}

    - 3 Cloud effect added successfully, just having some issues with its position, When in Firefox (after some adjustment to numbers it looks great, but when tested in different browsers there are some issues with spacing.

    I think you will want first apply aforementioned changes related to footer links as the current code may be affecting this (it breaks layout a bit). Let me know please if the issue "solved itself" after fixing links.

    - 4 - Centre the add to cart button (perfect but the button changed colour to red can it be green please?) + Lines separators - Perfect

    This code should help change the color of the button to green:

    .single_add_to_cart_button {background:#FF00!important;}

    Let me know if it helped!

    Best regards,
    Adam

  • Tom

    Hi Adam,

    Thanks very much for the clarification, I have updated the links - http://take.ms/0imIf
    and added the CSS - http://take.ms/xIhpg
    having some issue with the layers and order. The links are displayed behind the cloud background can the be brought in front of it ? - http://take.ms/oN2E1
    Green button still red - http://take.ms/EfKE4 (tried clearing cache but still seeing it can you confirm?) - http://take.ms/SABN6

    Support access is ACTIVE until January 13, 2016 12:18 am
    Thanks

    Tom

  • Adam Czajczyk

    Hello Tom,

    Thanks for your replay!

    I took another look at your site. To put links on top of the "cloud" I changed CSS (given to your by Perdrag in his first post here):

    .site-footer:before {
        content: url(IMAGE_URL);
        display: block;
        position: absolute;
        top: -120px;
        text-align: center;
        width: 100%;
    }

    by adding

    z-index-1!important;

    line. This brought links to front.

    I think however you will want to fix your links HTML code (as shown on the 2nd screenshot in your recent post). The last line shouldn't end like this:

    "Sitemap/a>"

    but instead should be like this:

    "Sitemap"

    Green button still red (...)

    That's because there was already this code in Custom CSS box:

    /*fixes on product page*/
    button.single_add_to_cart_button{
      float: none !important;
      background-color: red !important;
    }

    I have removed (commented out) the "background-color" line there and fixed the code that you added. You can see now it's green. You may want however to replace the "#00FF00" green color with your own, here's a handy color value chart:

    http://www.w3schools.com/tags/ref_colorpicker.asp

    Best regards,
    Adam

  • Tom

    Hi Adam,

    Thanks very much for checking those for me. updated the sitemap text looks good :slight_smile:

    1 - Would it be possible to move the text of the links down vertically a bit ? - http://take.ms/ukk5c

    2- add some boxes surrounding each of the links when mouse hovered/ click them (similar to main site) here - http://tinyurl.com/q4uutuk

    3 - Issue with Menu bar cutting off page content. is there a way to add some top padding to all pages so that the content is pushed down. as the menu is overlapping the images and text on most/all pages see here - http://take.ms/7BdQ1 and here etc - http://take.ms/SZ6mi

    Support Access open until 13 Jan 12:18am
    Thanks

    Tom

  • Adam Czajczyk

    Hey Tom!

    1 - Would it be possible to move the text of the links down vertically a bit ? - http://take.ms/ukk5c

    Done. I've added "z-index:-1" rule to ".site-footer" class in order to keep links on top of footer and added "margin-bottom:-35px;" rule to ".custom-links-holder" class to move links down a bit;

    2- add some boxes surrounding each of the links when mouse hovered/ click them (similar to main site) here - http://tinyurl.com/q4uutuk

    Done by adding following rules to your site's custom css:

    .custom-links-holder a {padding:5px 10px;}
    .custom-links-holder a:hover {border:1px solid #000;}

    3 - Issue with Menu bar cutting off page content. is there a way to add some top padding to all pages so that the content is pushed down. as the menu is overlapping the images and text on most/all pages see here - http://take.ms/7BdQ1 and here etc - http://take.ms/SZ6mi

    Done by adding following CSS rule at the very top of your custom css:

    .site-content {margin-top:50px;}

    I hope I helped :slight_smile:

    Best regards,
    Adam

  • Tom

    Hi Adam,

    Thanks very much for those changes
    I may have accidentally overridden one of your earlier changes, when i updated the Custom CSS page at same time. and not sure how to replicate the 1st solution you mentioned.

    Done. I've added "z-index:-1" rule to ".site-footer" class in order to keep links on top of footer and added "margin-bottom:-35px;" rule to ".custom-links-holder" class to move links down a bit;

    Have just tried to re-edit did you mean this ? - http://take.ms/hqgjE

    have updated the other ones you mentioned in your last message

    Also would it also be possible to fix the footer see here - http://take.ms/qllan
    (re-tested in I.E. seems to be ok there. but when in firefox/ Chrome/ Safari / Opera there is issues in display)
    Another issue in I.E is with the product thumbnails are displaying blury and when clicked nothing happens ? - http://take.ms/1ONmh

    And lastly issue with clouds viewed on smaller displays / mobile devices - http://take.ms/iQen7

    Thanks

    Tom

  • Adam Czajczyk

    Hello Tom!

    I may have accidentally overridden one of your earlier changes, when i updated the Custom CSS page at same time. and not sure how to replicate the 1st solution you mentioned.

    I think it would be safer to wait for our response after asking question that results in us making changes to your site :slight_smile: I've fixed that for you already, hopefully we didn't "cross-updated" the custom CSS :slight_smile:

    Also would it also be possible to fix the footer see here - http://take.ms/qllan

    This could be done but I think it would require some serious changes to both CSS and HTML code of your theme, that would also result in setting all "footer-related" CSS that we've already created from scratch. This may take a bit more time than it already did and I'd also need a direct access to your site. Let me know please if you're willing to give it a shot, however I cannot guarantee that I'll be able to do this for you as without checking the code myself I'm not sure whether it would be within the scope of this support forum or would require a custom development work.

    Best regards,
    Adam

  • Tom

    Hi Adam,

    Thanks for the reply and fixing the problem. Sorry sometimes get very focused on trying to do everything at once, normally i ask few things at same time and leave it a day or two before updating. but was very much in that updating from threads zone :slight_smile: anyways. Changes look great thanks again.

    If you wouldn't mind taking a look if possible to resolve the footer area. i can send you details for an full Admin Account + FTP details if you need those too via the wpmudev "i have a different Question" contact form? If it turns out to be too much will try post in custom dev (but if can be avoided would prefer not too budget issues..)

    I also noticed two other issues when checking the site in I.E.
    1 - the product thumbnails are displaying blury and when clicked nothing happens ? - http://take.ms/1ONmh

    2 - issue with clouds viewed on smaller displays / mobile devices - http://take.ms/iQen7

    Thanks

    Tom

  • Adam Czajczyk

    Hello Tom,

    I hope you're well today and thank you for your patience.

    I've modified the code of the "footer.php" file of your theme by moving the closing </div> tag for the "<div id="page">" element above the custom links and footer. This allowed me to set overall height of <html> and <body> elements to 100% (actually it's set to 100vh which is virtually the same here, "vh" stands for "viewport height") and set height for "<div id="page">" element.

    As a result the entire footer is always at the very bottom of the screen. The downside is that with some screen resolutions the page may always present a vertical scroll bar but that depends on the particular screen (I tested this with three different screens). I think this should do the job here :slight_smile:

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.