Customising my site

  • livlev · Member ·

    Hello,

    I’m wondering if anyone can help me. I have upgraded to the premium version of wordpress so have the ability to customise my site but I am a beginner so not sure how to do the things I want:

    1) I have uploaded the circles as images. I like how when you hover over them an aspect of the image lights up in colour. However, i would like all the other detail to be black at all times (even when not hovering). At the moment each circle and detail within is a dull grey until you hover over it. Is there a way to do this?

    2) I have uploaded the ‘liv lev’ at the side of the page as a background image. Throughout the website, including when you click on posts I would like it so ‘liv’ always sit at the top of the page, and ‘lev’ is always at the bottom with the ‘l’ as a continuous scroll in between. How would I achieve this?

    3) Is there a way of adding an image on top of the button ‘About Me’? This will allow me to use a font that is consistent with the rest of my site as I will just upload it as an image.

    4) Finally, I would like to have a page at the top which says ‘portfolio’ but I want it to lead to my homepage. How would I do this?

    Thank you very much for all your help in advance.

    Olivia

    The blog I need help with is: (visible only to logged in users)

  • thesacredpath · Member ·

    Hi there,

    1) I have uploaded the circles as images. I like how when you hover over them an aspect of the image lights up in colour. However, i would like all the other detail to be black at all times (even when not hovering). At the moment each circle and detail within is a dull grey until you hover over it. Is there a way to do this?

    It looks like you have accomplished this.

    2) I have uploaded the ‘liv lev’ at the side of the page as a background image. Throughout the website, including when you click on posts I would like it so ‘liv’ always sit at the top of the page, and ‘lev’ is always at the bottom with the ‘l’ as a continuous scroll in between. How would I achieve this?

    On setting the background image to be fixed at left top, this can be accomplished, at least partially by setting the background to “fixed” at Appearance > Header in your dashboard, but I think in this case, it would be better to use CSS since when “fixed” your image shifts a bit to the top and is partially obscured. Add the following CSS to fix the image (no scroll). The second rule below moves the next and previous arrows on the posts down slightly so they don’t interfere with the background image. 

    body.custom-background {
    background-attachment: fixed;
    background-position: left 50px;
}
.site-content #nav-below .nav-previous a, .site-content #nav-below .nav-next a {
    top: 40px;
}

    On phones in portrait orientation, your background image overlays the circle images on the main page, which requires us to use a media query to adjust that for smaller screens (under 420px in width). Add the following at the very bottom of your custom CSS to take care of this issue. 

    @media screen and (max-width: 420px) {
	.blog #page, .archive #page {
		width: 50%;
		margin-left: 150px;
	}
}

    3) Is there a way of adding an image on top of the button ‘About Me’? This will allow me to use a font that is consistent with the rest of my site as I will just upload it as an image.

    This will allow you to add an image for your about me menu item. It specifically targets that menu item by its unique menu item id. I’ve limited this to when the full menu is active. When the touch menu activates at widths below 800px, it will revert back to the original design so as not to cause issues with touch devices. Upload your image to your media library, get the URL and replace URL_OF_IMAGE between the quote marks with that URL. For reference, the existing space for the image is 100px wide by 30px tall. 

    @media screen and (min-width: 800px) {
	#menu-item-273 {
		background: url("URL_OF_IMAGE") no-repeat scroll center top transparent;
	}
	#menu-item-273 a {
		color: rgba(0, 0, 0, 0);
	}
}

    4) Finally, I would like to have a page at the top which says ‘portfolio’ but I want it to lead to my homepage. How would I do this?

    On your Custom Menu, create a Custom Link and for the label use “Portfolio”.

  • livlev · Member ·

    Wow thanks so much for your reply! I will give all of that a go :-)
    With question 1- I haven’t accomplished this. The circles all appear a dull grey until you hover over them (on desktop). It may be that you didn’t see this if you were viewing it on mobile?
    Thanks again

  • thesacredpath · Member ·

    Actually, no, I was viewing on my desktop monitor, but I’ve checked again and on my system, the change is very subtle, but we can fix it with the following. 

    .blog .hentry a .attachment-home-post, .archive .hentry a .attachment-home-post, .search .hentry a .attachment-home-post {
    opacity: 1;
}
  • livlev · Member ·

    Great, thank you very much.

    With point 2 above about my background image it may be that I am unable to do what I would like, it is difficult for me to explain in words but i will try in a different way.

    Imagine my background as 3 components:
    liv
    l
    lev

    I would like ‘liv’ to always sit at the top and ‘lev’ to always sit at the bottom. The ‘l’ in between I would like to be as short or as long as the page. So if it is a long post it would end up looking like this:
    liv
    l
    l
    l
    l
    l
    lev
    (the ‘l’ being one continuous line)
    Is this possible?
    It may be that I have to upload 3 separate images and set the ‘liv’ and ‘lev’ as fixed and the ‘l’ with a scroll?

    How would I do this?

    Thank you again for all your help.

    Olivia

  • thesacredpath · Member ·

    Hmmm, we can give something a try. Can you create two images, one with liv and one with lev, cropped close and then upload them to your media library and I can see what I can do. Post back here once you have done that and I’ll work on it for you.

  • livlev · Member ·

    Sure. Thanks so much.

    Here are the links to ‘liv’ and ‘lev’:
    https://livlev.files.wordpress.com/2015/03/liv.jpg
    https://livlev.files.wordpress.com/2015/03/lev.jpg

    I’ve also created one for the ‘l’ incase you need it for the scrolling part:
    https://livlev.files.wordpress.com/2015/03/l.jpg

    On point 3- I have uploaded images on my menu items. In order to create the space for the images (they are bigger than 100 x 30px) I have increased the font size of the layer underneath. However, this has pushed all my posts down. How do I lift these back up?

    Also, at the moment the hover function works on both my menu items at once. How do I separate this so each one lights up individually when hovering over the specific item?

    Thank you again,

    Olivia

  • thesacredpath · Member ·

    Thanks for the image links. I’ve gotten most of it for you, but I can’t do the line between the two of them. The top image is a body background image, and the bottom image is placed in the footer. I tried several CSS tricks and just couldn’t get it to work. Give the following a try though, and see what you think. 

    body.custom-background {
    background: url('https://livlev.files.wordpress.com/2015/03/liv.jpg') no-repeat 10px top;
}
.site-footer {
    width: 100%;
    position: absolute;
    left: 0;
    background: url('https://livlev.files.wordpress.com/2015/03/lev.jpg') no-repeat 10px 50px;
    opacity: 1;
    z-index: 1;
}
.site-footer .site-info {
    float: right;
    opacity: 0.2;
}
  • livlev · Member ·

    Thanks alot for working on it for me. I’ve actually managed to do it! By using a footer as you suggested and one continuous image for the liv + l rather than two separate ones- i set the image as far longer than i will ever need and it automatically gets cut off by the footer :-)

    I hope you don’t mind, I have a few more questions for you:

    1) On my posts I would like the ‘lev’ footer/end of the page to be above “share this” and the social media links or at least to the left of them. At the moment the page goes on for quite abit longer which I do not want. How do i lift the footer/shorten the page?

    2) I have uploaded images on my menu items. In order to create the space for the images (they are bigger than 100 x 30px), I have increased the font size of the layer underneath. However, this has pushed all my posts down. How do I lift these back up?

    3) For some reason since I uploaded an image to the ‘portfolio’ menu item it now clicks through to the about me page instead of the home page. How do I change this back?

    4) At the moment the hover function works on both my menu items at once. How do I separate this so each one lights up individually when hovering over the specific item?

    5) How do I remove the arrows from my posts?

    6) Finally, for mobile i think it will work better if I just have a header image rather than the continuous ‘liv lev’ scroll. What code would I use to say ‘on mobile i want no footer, no background, and change the header to “image URL”‘?

    Thank you so much again for all the time and help you have given me. I really appreciate it.

    Olivia

  • thesacredpath · Member ·

    1) On my posts I would like the ‘lev’ footer/end of the page to be above “share this” and the social media links or at least to the left of them. At the moment the page goes on for quite abit longer which I do not want. How do i lift the footer/shorten the page?

    In between the sharing and the footer are a couple elements that we can’t really delete. One is the space held for the next/previous post buttons, which at 600px and narrower move below the posts. The other element down there is the comments, which you can toggle open or closed, but we can’t really do much there. There is a bit of padding on the bottom of the post content section, but adding that along with the next/previous button space, it isn’t going to shorten things up by very much.

    Your bottom image in the footer is 218px in height. I would suggest shortening that up as much as you can since that is holding a lot of space in the footer. If you make it perhaps 100px in height and include a little whitespace below lev, we can then shorten things up a bit, but again, it really isn’t going to get things much closer.

    2) I have uploaded images on my menu items. In order to create the space for the images (they are bigger than 100 x 30px), I have increased the font size of the layer underneath. However, this has pushed all my posts down. How do I lift these back up?

    3) For some reason since I uploaded an image to the ‘portfolio’ menu item it now clicks through to the about me page instead of the home page. How do I change this back?

    First, remove this from the 800px media query in your your custom CSS. 

    #menu-item-321 {
    right: -35px;
    top: -93px;
}

    Next, replace the following two sections in the 800px media query with the following. 

    #menu-item-320 {
    background: url("https://livlev.files.wordpress.com/2015/03/portfolio3.jpg") no-repeat scroll center top transparent;
    color: #000;
    font-size: 50px;
    opacity: 1;
    width: 100px;
    height: 94px;
    top: -48px;
}
#menu-item-321 {
    background: url("https://livlev.files.wordpress.com/2015/03/about-me.jpg") no-repeat scroll right center transparent;
    color: #000;
    font-size: 50px;
    opacity: 1;
    width: 100px;
    height: 100px;
}

    and add the following two new rules to the 800px media query 

    .single .hentry {
    padding-top: 0;
}
.single .main-navigation {
    max-height: 100px;
}

    5) How do I remove the arrows from my posts?

    It appears like you have this taken care of.

    6) Finally, for mobile i think it will work better if I just have a header image rather than the continuous ‘liv lev’ scroll. What code would I use to say ‘on mobile i want no footer, no background, and change the header to “image URL”‘?

    I would make a media query at min-width 600px and then add move the body and footer stuff with the images in them into that media query.

  • livlev · Member ·

    Thanks for your response.

    1) I have sorted point 1 above (lifting the footer up) on my POSTS by using:

    div#content.site-content {
    margin-bottom: -245px;
    }

    The only problem is on my HOMEPAGE the footer is now far too high. Is there any way of using the above code on all site content EXCEPT my homepage? What code would I write for this?

    2) Is there also a way of making the opacity ‘0’ (or similar) on everything below the footer? This would stop the ‘l’ from the background appearing beneath the footer?

    3) For my menu items I would like to do individual roll overs.
    So when you hover on ‘portfolio’ an alternative image appears, and when you hover on ‘about me’ another alternative image appears. What is the code for this?

    Thank you,

    Olivia

  • thesacredpath · Member ·

    You can limit the change to only the single post pages by using the .single CSS body class (in the opening HTML body tag) like this. 

    .single #content.site-content {
margin-bottom: -245px;
}

    2) Is there also a way of making the opacity ‘0’ (or similar) on everything below the footer? This would stop the ‘l’ from the background appearing beneath the footer?

    Hmmm, I can’t think of a way to do that given how the images had to be inserted.

    3) For my menu items I would like to do individual roll overs.
    So when you hover on ‘portfolio’ an alternative image appears, and when you hover on ‘about me’ another alternative image appears. What is the code for this?

    The entire header area has an opacity and a transition that is making everything change on hover. Add the following to reverse that. 

    .site-header {
    opacity: 1;
}

    Next set the opacity in #menu-item-320 and #menu-item-321 to 0.5.

    And add the following to your 800px media query. 

    .site-header {
    opacity: 1;
}
#menu-item-320:hover, #menu-item-321:hover {
    opacity: 1;
}
  • livlev · Member ·

    Thanks again for your response. I’m nearly there! (hopefully). Just have a couple more questions I hope you can help me with:

    1) I have tried to lift all of my posts (the circles) up on the first page. To do this I have shortened the header and used the following CSS:

    header#masthead.site-header {
    height: 150px;
    }

    However, this has only lifted the first/second post higher and means that all of the others arn’t aligned. How do I align these so they are all at the same height?

    2) I would like my menu items to change depending on the specific page that I am on. I have designed these on the links below so you can see what I am trying to achieve:

    a) When on the portfolio/homepage I would like it so “portfolio” is black and underlined; and “about me” is in grey:

    b) When on the about me page, I would like “about me” in black and underlined; and “portfolio” in grey:

    c) When on the pages of my posts, I would like both “portfolio” and “about me” in grey:

    On all pages, when hovering over the specific menu items I would like the black and underlined versions to appear.

    3) Sorry but I don’t understand what you mean above about the mobile version of the website when you say “I would make a media query at min-width 600px and then add move the body and footer stuff with the images in them into that media query.”
    Please can you tell me the exact CSS I need to insert for a mobile version where I remove the custom background (I would like just a white background, no livlev), include a new header (insert URL), and remove the footer?

    Thank you very much,

    Olivia

  • blogdptr · Member ·

    Hey guys,

    This might sound silly but I’m trying to edit the HTML on my wordpress site. I purchased the premium package but I still cannot find the “custom design” tab that I’ve been reading about. Any idea where I can find that tab or where I can find the HTML editor for my wordpress blog?

    Thanks,
    Danny

  • thesacredpath · Member ·

    Hi @blogdptr, if you go to Appearance > Customize, you will see the CSS tab where you can write CSS rules to override the existing CSS and make changes to your site styling. You can also set Custom fonts for headings and body text under the Fonts tab and Custom colors and palettes at Colors & Backgrounds. You can learn more about Custom Design here.

    We cannot edit the theme php script files/HTML here at WordPress.com.

  • livlev · Member ·

    Hi @thesacredpath. Please could you also respond to my post above @blogdptr when you get the chance?

    Thanks alot,

    Olivia

  • thesacredpath · Member ·

    Olivia, the navigation div is what is holding things down. Add this and adjust as desired. 

    .main-navigation {
    height: 140px;
}

    To have the current page menu item in black and underlined, add the following to your 800px media query. 

    .current-menu-item {
    opacity: 1 !important;
    border-bottom: 2px solid #000;
}

    To have the menu items black and underlined when hovered, modify this rule in your 800px media query and add the border bottom declaration. 

    #menu-item-320:hover,#menu-item-321:hover{
    opacity:1;
    border-bottom: 2px solid #000;
}

    I’ll post this and then work on the last question and post back shortly.

  • thesacredpath · Member ·

    On the liv and lev going away on mobiles, add the following at the very bottom of your custom CSS. 

    @media screen and (max-width: 600px) {
	body.custom-background, .site-footer {
		background: none;
	}
}
  • livlev · Member ·

    Great, thank you.

    1) The only difference to how I would like my menu items from what you have said above is that when on the current page, I would like the menu item to be black and underlined (as per the image link below). Although you have supplied the CSS to do this above, I would rather insert an image here as opposed to creating the underline in CSS, because you can see the line that I want is not a solid line (see visual reference at link below). Therefore am I able to upload this as a new image for when on the current page- (it would need to be a different image for each ‘portfolio’ and ‘about me’)?
    https://livlev.files.wordpress.com/2015/03/portfolio-underlined-for-page-hover.jpg

    2) For some reason when viewing my site on Safari my menu items are not aligned (‘portfolio’ is higher than ‘about me’). How do I make sure they are aligned across all browsers?

    3) I have included a new header on the mobile version. However, when I now open the ‘menu’ it overlaps the header. Is there any way of keeping the Menu and its contents to the right?

    Thanks again for all your time. So close I can see the end :-)

    Olivia

  • thesacredpath · Member ·

    1) Although you have supplied the CSS to do this above, I would rather insert an image here as opposed to creating the underline in CSS…

    I see that you have figured this part out. Congratulations!

    2) For some reason when viewing my site on Safari my menu items are not aligned (‘portfolio’ is higher than ‘about me’). How do I make sure they are aligned across all browsers?

    If you look at your about menu image and compare it to the portfolio image, you will see that there is more whitespace in the top of the about me menu image. I would suggest taking that original (non-hover image) and move the test up within that image so that it is in the same place as the text in the Portfolio menu item image. There might be another issue with things, but let’s get both images the same size with the text aligned within them first and see if additional adjustments are needed.

    3) I have included a new header on the mobile version. However, when I now open the ‘menu’ it overlaps the header. Is there any way of keeping the Menu and its contents to the right?

    Give this a try. 

    .main-small-navigation {
    float: right;
    max-width: 150px;
}
1 2
  • The topic ‘Customising my site’ is closed to new replies.