Remove border lines around custom menu in footer

  • Unknown's avatar
    qdeesworldwide · Member ·

    Hi, I need help to remove the border lines on top and bottom of the custom menu link “disclaimer” in the footer. Or if possible, is there a way to change the line color so that it’s invisible?

    Thanks.

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, this will take away the borders in the footer custom menu. 

    #nav_menu-9 ul li {
	border: none;
}
  • Unknown's avatar
    qdeesworldwide · Member ·

    Hi thesacredpath. Thank you so much, the code worked!
    May I know how to change the border colors as well?

    I also need help changing the “follow” button in my footer widget.
    Really appreciate the help. :)

  • Unknown's avatar
    thesacredpath · Member ·

    Are you talking about the border color on the custom menu in the footer, the one we removed the border from? If so, remove what I had given before and add this and adjust the color code as desired. 

    #nav_menu-9 ul li {
	border-color: ffee00;
}

    If not, let me know which border you are wanting to change the color on.

    For the follow button, this would be the CSS to change the background color, border color and text color. 

    #blog_subscription-5.widget input[type="submit"] {
	background-color: #aa00ff;
	border-color: #0000ff;
	color: #ffffff;
}
  • Unknown's avatar
    qdeesworldwide · Member ·

    Hey, thank you so much, these codes worked! Appreciate the help :)

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • Unknown's avatar
    qdeesworldwide · Member ·

    Hi, I need more help again. Your help is very much appreciated.

    Is there a way to insert a video or GIF for the featured image at the top on the page?

    I would like to change the background color of the top menu bar that is currently black.

    I would also like to change the title text, body text color and background color of blog posts as displayed on the home page of my blog.

    Also, for the footer, I would like to change the font color and size for the body text under disclaimer from grey to white like my other footer texts.

    Also, is it possible to insert an image into the footer?

    Sorry if I’m asking a lot. I would be very grateful for your help.

  • Unknown's avatar
    thesacredpath · Member ·

    On the header featured image, we can’t add a video there, and I’m not sure if an animated gif will work there or not. gifs don’t typically work well when an image resizes with window width, but if you create one the same size as your top image, you can add the following custom CSS and replace URL_OF_GIF with the gif and see what happens. Your new image will have to be the same size as the static image there now, which is 1800 x 720. Keep the gif with just a few frames as they can get huge really quickly and then cause delays in page loading. 

    .site-banner .site-banner-thumbnail {
background-image: url('URL_OF_GIF') !important;
}

    On the translucent header area, the color is set as RGB with an alpha transparency. Add the following to your custom CSS, and you can adjust the last number (0.4) to make it darker or lighter. You can also replace the rgba color declaration completely and put in a standard hex color, but it will hide part of the image. 

    .home .site-header, .blog .site-header {
    background-color: rgba(36,38,41,0.4);
}

    On the front page posts colors, this will get you going. 

    .blog .posts .entry-inner {
	background: #aaffff;
}
.blog .posts .entry-title a {
	color: #cc0000;
}
.blog .posts .entry-content p {
	color: #00cc00;
}

    For the disclaimer body text, add the following and adjust. 

    #text-7 {
	color: #fff;
	font-size: 90%
}

    For the footer area, adding an image can make is difficult to read the text, depending on the nature of the image. Images typically have a varied color palette. You can add the following as a start and replace URL_OF_IMAGE between the quote marks with the image you wish to use and see what you think. Adjustments may have to be made. 

    .site-footer {
background: transparent url('URL_OF_IMAGE') no-repeat scroll top center / cover;
}
  • Unknown's avatar
    qdeesworldwide · Member ·

    Hi sir,
    Thank you very much for taking the time to help, all the codes worked like a charm.

    I have one more question, how do you change the color around the “read more” button shown on blogposts? Right now it looks odd with the white background and I want the line going across the blogposts to be gone as well.

    Also, do I have to upload my own pictures online first before inserting the URL into the CSS for the header and footer image?

  • Unknown's avatar
    thesacredpath · Member ·

    … how do you change the color around the “read more” button shown on blogposts? Right now it looks odd with the white background and I want the line going across the blogposts to be gone as well.

    To change the colors on the Read More button, add the following to your custom CSS and adjust as desired. 

    .link-more a {
    background-color: #e7ae01;
    color: #fff;
}

    I’m not sure what you are meaning by “line”? Can you explain a bit more?

    Also, do I have to upload my own pictures online first before inserting the URL into the CSS for the header and footer image?

    Yes, that is best.

  • Unknown's avatar
    qdeesworldwide · Member ·

    Thank you so much!

    I need help on one more thing. How do you change the texture or pattern for the blog header, footer and blogpost background? I need to give it a pattern, not just color.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, a post background image can be added with the following. Upload the image and get the URL and replace URL_OF_IMAGE between the quote marks. 

    .blog .posts .entry-inner {
background: url('URL_OF_IMAGE') no-repeat scroll center top / cover;
}

    For the header area, are you talking about on the static pages, such as your about page? If so, add the following and enter your image url. 

    .site-header {
background: url('URL_OF_IMAGE') no-repeat scroll center top / cover;
}

    On the bottom footer area, use the following. 

    .footer-bottom-info {
background: url('URL_OF_IMAGE') no-repeat scroll center top / cover;
}

    Depending on the nature of your images, we may need to make additional adjustments.

  • Unknown's avatar
    qdeesworldwide · Member ·

    Thank you so much again!
    Sorry to keep asking so many questions but is there a way to change the layout of the blogposts so that they appear onen post per row instead of 2 per row? for example, “Article” and “Comic#1” are in the same row at the top, is there a way to make it so that only “article” is the only post on top, followed by others?

    Also, is there a way to change the word font of the header menu bar?

    Really appreciate all your help so far. :)

  • Unknown's avatar
    qdeesworldwide · Member ·

    Also one more, how do you change the color of the widget text for “Contact Info” to all white? The phone number is now grey.

  • Unknown's avatar
    thesacredpath · Member ·

    On the posts on your main page, at 1601px and wider, the display goes to three in each row. We can make the first post full width, but it becomes seriously huge and I don’t think you will like what it looks like. Add the following to your custom CSS, save and then visit your site to see what it looks like. 

    .home article:first-of-type {
	width: 100%
}
  • Unknown's avatar
    thesacredpath · Member ·

    On the menu font, Dyad uses the Base Font set at Customize > Fonts. Right now you have that set to the Default. We can only set two custom fonts, and we cannot use fonts from outside of the system. We can use the following to change it to the Merriweather font you are using for your headings. 

    #site-navigation a {
	font-family: "Merriweather",serif !important;
	font-style: italic;
}

    For the phone number color in your contact widget, add the following. 

    .confit-phone {
	color: #fff;
}
  • Unknown's avatar
    qdeesworldwide · Member ·

    Hi, Thank you so much once again all codes worked.

    However, I would like to stretch every article to be one per row, like the first article on the top. Because I want the images of the blog posts to appear on the left for first article, then when you scroll down the second article’s image is on the right, then the third article will have the image on the left. Alternately. Is it possible to do that?

  • Unknown's avatar
    thesacredpath · Member ·

    We can do this, but there are some consequences. The theme and WordPress software create images of the correct size for the original layout. When we do this, the images are all going to lose quality and look fuzzy. Secondly as you will see, the text summary looks very small in comparison to the image on wider screens/windows. Also, trying to get all the images and content for each post to alternate takes quite a bit of code and media queries to reverse the original alternate styling. Currently the first three (when there are three columns) have the images on the left and the next three the images on the right.

    Making all those changes is a little more than what we typically do here in the CSS forums, so you may want to consider hiring a web designer to do this sort of thing. First off though, add the following to your custom CSS, save and then view your site on your computer and widen out your browser window so you can see the effect. 

    .posts .hentry {
  width: 100% !important;
}

    My second thought would be to consider a different theme that doesn’t have such a complex layout to the blog page.

  • The topic ‘Remove border lines around custom menu in footer’ is closed to new replies.