Setup/ Appearance

MarieFryman

Hello - I'm in need of some help with custom css for my website. (I'm not a developer so am finding this a little hard.)

I want my SmugMug site to match my current one: www.marie-helena.co.uk
My smugmug address is: clientzone@marie-helena.co.uk

* I would like the menu to be formatted the same i.e. colours and styles, dividers
*I would like the header/ title to e fixed
* I would like the slideshow/ cover photos to be slightly overlapped y the intro text

I am also having difficulty matching the font/ heading styles - despite having changed them in the customisation section of the website.

Could you please help?

Hikin' Mike

We need to see your SmugMug website. You gave me an e-mail address.

denisegoldberg

@Hikin' Mike said:
We need to see your SmugMug website. You gave me an e-mail address.

I think this is the smug site - https://clientzone.marie-helena.co.uk/.

Hikin' Mike

@denisegoldberg said:

@Hikin' Mike said:
We need to see your SmugMug website. You gave me an e-mail address.

I think this is the smug site - https://clientzone.marie-helena.co.uk/.

Yep, I think it is.
Thanks.

Hikin' Mike

I have to ask. Why do you need to replicate a slideshow on your SmugMug site? Looks like you're doing the same thing that I do. I use WordPress as a website and I use SmugMug ONLY to display my galleries.

Hikin' Mike

This should get you started.

First off, you can't copy HTML into your Theme's Custom CSS, so remove that. Copy this and put this into your Theme's Custom CSS instead:

/**
* WordPress Genericons
***************************************************/
@font-face {
    font-family: 'Genericons';
    src: url('http://http://www.marie-helena.co.uk/wp-content/themes/sela/fonts/genericons/genericons-regular-webfont.eot');
    src: url('http://http://www.marie-helena.co.uk//wp-content/themes/sela/fonts/genericons/genericons-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://http://www.marie-helena.co.uk//wp-content/themes/sela/fonts/genericons/genericons-regular-webfont.woff') format('woff'),
         url('http://http://www.marie-helena.co.uk//wp-content/themes/sela/fonts/genericons/genericons-regular-webfont.ttf') format('truetype'),
         url('http://http://www.marie-helena.co.uk//wp-content/themes/sela/fonts/genericons/genericons-regular-webfont.svg#genericonsregular') format('svg');
    font-weight: normal;
    font-style:  normal;
    }

.sm-user-ui .sm-page-widget-nav-toplink:after {
    display:        inline-block;
    font-family:    'Genericons';
    font-size:      16px;
    font-style:     normal;
    font-weight:    normal;
    font-variant:   normal;
    line-height:    1;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    }   

/**
* SmugMug Menu
***************************************************/
.sm-user-ui .sm-page-layout-region-body .sm-page-widget-content .sm-page-widget-nav-horizontal {
    background-color: black;
    padding: 20px 0;
    }

    .sm-user-ui .sm-page-widget-nav-color-default a, 
    .sm-user-ui .sm-page-widget-nav-color-default a:visited {
        color: white !important;
        }

    .sm-user-ui .sm-page-widget-nav-color-default a:hover {
        color: gray !important;
        }

.sm-user-ui .sm-page-widget-nav-toplink:after {
        color: #ffa4ad;
        content: " \2022";
        margin-left: 1em;
        }   

    .sm-user-ui .sm-page-widget-nav-toplink:last-of-type:after  {content: " ";} 

Then in 'Customize > Content and Design > Entire Site > Layout'. Layout: Stretchy; Sections: Header/Body/Footer: 1182px. Once you've done that, you can go back and adjust the logo widget using the top/bottom margins.