Need CSS help for homepage adjustments

  • Unknown's avatar
    patriciaundbeni · Member ·

    I’m currently having a few problems with my homepage and I can’t seem to be able to customise it how I would like to. So perhaps you could help me out?

    Here are the main things I would like to change:

    -is it possible to change the colour of the frame in the title of the pages?

    – or can the pique cafe frame be done with a continous frame, without space on the bottom like in the demo version?

    – or would it even be possible to have a coloured point – ball in front of the page name?

    – at the moment there is a kind of shadow in the context text. is it possible to hide this shadow?

    – i have a contact form included in my page, but there is a blue line and a blue box. can i change the colour of that line and of the box?

    – can i change the letters in the contact form into lowercase letters?

    The blog I need help with is hi5sports.ch.

    thanks a lot for your help.
    patricia

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

  • Unknown's avatar
    hallluke · Member ·

    OK I’m going to work through your questions in order!

    Based on the Pique demo page you can change the page title borders with this code:

    .pique-panel-content h2,
.pique-panel-content h2::after,
.pique-panel-content h2::before {
  border-color: #f00;
}

    Or make it a complete border with this code:

    .pique-panel-content h2 {
  border-bottom: 2px solid;
  border-color: #f00;
}
.pique-panel-content h2::after,
.pique-panel-content h2::before {
  display: none;
}

    I’m not sure what you mean by a point in the page name. Could you link to an example or describe what you’d like in a bit more detail?

    You’re already managed to turn off the text shadow with this code:

    .pique-panel-content {
	text-shadow: none;
}

    You can set the colour of the contact form like this:

    .pique-panel-content form {
  border-color: #8EBF21;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
  border-color: #8EBF21;
  color: #8EBF21;
}

    And you can make the form labels normal sentence case using this:

    .contact-form label {
  text-transform: capitalize;
}
  • Unknown's avatar
    patriciaundbeni · Member ·

    thanks for the quick reply! it helps a lot…..

    i mean to have a green dot/ball in front of the title or/and after the title instead of the frame.

    and is it possible only to have a continuous frame on the bottom?

    would it also be possible to include the logo into the menu?

    thanks for your reply.

  • Unknown's avatar
    hallluke · Member ·

    To add a green dot you’d need to create an image of one and upload it to your media library, then you can include it with this code, just replace the URL and set the appropriate sizes:

    body.home .pique-panel .entry-title::before,
body.home .pique-panel .entry-title::after {
  width: 25px;
  height: 25px;
  background: url("https://placehold.it/25x25") no-repeat;
  position: inherit;
  display: inline-block;
  margin: 0 5px;
}

    The second block of code from my previous post should set up the continuous border, based on the demo site for your theme.

    Here’s an example of how to include an image in your navigation menu (on tablets and larger screens):

    @media screen and (min-width:768px) {
  nav.sticky.main-navigation {
    background-image: url("https://placehold.it/150x40");
    background-repeat: no-repeat;
    background-position: 10px center;
    padding: 10px 0;
  }
}
  • Unknown's avatar
    patriciaundbeni · Member ·

    thanks so much, it works.

    i have more questions:
    – how can i change the text colour in the navigation menu to another colour when changing the menu. at the moment all text in the menu is the same colour, even if i’m in the menu about us. can this be adjusted?

    – how can i change the color of the bottom bar?

    – is there a possibility to delete the fix text “Erstellt mit WordPress.com.” in the bottom bar?

    – is it possible to have several sites as static page? mean can i have several pictures?

    thanks for the reply.

  • Unknown's avatar
    patriciaundbeni · Member ·

    here is an example of the changing static/front page:
    http://iloveyoga.li

    is it possible too to have an arrow or something on the side (like in the page of http://iloveyoga.li on the right bottom side)?

  • Unknown's avatar
    hallluke · Member ·

    Here’s how to set the colour of the currently active menu item:

    nav#site-navigation .current_page_item a {
  color: #8EBF21;
}

    Here’s how to set a background colour on the footer section:

    #colophon {
  background-color: #4F4F4F;
  background-image: none!important;
}
.site-footer::before {
  display: none;
}

    You can only hide the WordPress attribution in the footer if you’re on a business plan. There are some options in the customiser that let you change the wording or use the WordPress icon instead if you’d prefer though. You can’t hide it with CSS as it is against the terms of service.

    You can’t use CSS to create an image slider like the one on the site you linked to. We can only change the styling of your theme not the functionality. There are other themes with post sliders that you can look through though. Or you could insert a slideshow gallery elsewhere on the page.

    If you add a text widget to your footer that contains a link like this:

    <a href="#content">Back to top</a>

    Then I might be able to move it around the page and see if I can make it look like the example you gave. Let me know when it’s done and I’ll have another look.

  • Unknown's avatar
    patriciaundbeni · Member ·

    thanks for the reply.
    i’ve entered the above mentioned text widget to my footer.

    is it possible to change the presentation of the menu in the footer. at the moment each site is under the other one, but i would like to have them all next to each other horizontal

  • Unknown's avatar
    patriciaundbeni · Member ·

    how can i add the “©2016 hi5sports.ch” next to the erstellt mit wordpress.com text

  • Unknown's avatar
    patriciaundbeni · Member ·

    – is it possible to make a tab in the text of a page?

    – is it possible to make a list like a chart, but without lines? when you check the page http://iloveyoga.li you see on the page: kurse/preise that there are three columns – is something like that possible?

  • Unknown's avatar
    patriciaundbeni · Member ·

    – can i press my logo which is now on the navigation bar and have a back to home buttom when klicking on my logo?

  • Unknown's avatar
    patriciaundbeni · Member ·

    can i make the static front page brighter? at the moment the static page is quite dark.

  • Unknown's avatar
    hallluke · Member ·

    Hi, the bit you’ve added to the footer is just some text in a title. I need you to add the HTML link code to the main body of the text widget to be able to do much with it.

    This code will add some text to the existing footer:

    .site-info::after {
  content: "© 2016 hi5sports.ch";
}

    And this will brighten up the header image overlay:

    .pique-panel-background::before {
  background: rgba(0, 0, 0, 0.1);
}

    You can split your content into columns but you’ll need to learn some HTML in order to do so, here’s a description on columns and the bit below about tables might be useful too.

    I can’t make that image a link. With CSS you can only style the page, you can’t change how any of it works fundamentally.

    You can change the footer widget menu to horizontal with this code:

    #widget-area-4 .menu-item {
  display: inline-block;
  width: 30%;
}
  • Unknown's avatar
    patriciaundbeni · Member ·

    hi, thanks.
    – i’ve entered the text “Back to top” to the bottom.

    – the logo in the navigation bar seems to be cut off on the right side. you can’t see the “.ch” clearly. but the logo is uploaded correctly and not cut off at that right side.

    thanks

  • Unknown's avatar
    patriciaundbeni · Member ·

    can i change the height of the static front page?

  • Unknown's avatar
    patriciaundbeni · Member ·

    is it possible to halve the whole panel? mean to have on one side a picture at the whole half side and at the other side only text? like here: https://e-sane.ch/dienstleistungen/ –> but no diagonal cut

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, I’m not seeing a logo in the navigation bar area at this time. Did you remove it? If you want to have it there, add it back in and I can take a look at it and see what I can do.

    can i change the height of the static front page?

    Can you explain a bit further what you are wanting? Each panel on the main page has a minimum height set for consistency from panel to panel. Is this what you are wanting to adjust? If so, I would suggest waiting till you have your content for the different panels pretty much done and then if necessary we can adjust the height of the panels.

  • Unknown's avatar
    thesacredpath · Member ·

    On the pic on one side and text on the other, that can probably be done by entering the right HTML into the page content area itself, and then creating the accompanying CSS to control it and make it work right with all screen/window sizes. It may be a good bit of work.

  • Unknown's avatar
    hallluke · Member ·

    I don’t think the missing part of the image is due to the CSS code, I think the image has had that part cropped off as it looks exactly the same in your first footer widget area. You might need to re-create the image, upload it again and then replace the URL in the CSS.

    As for moving the “back to top” link, try this out and see what you think:

    @media screen and (min-width: 768px) {
  #text-8 a {
    display: block;
    height: 65px;
    width: 65px;
    position: fixed;
    bottom: 50px;
    right: 50px;
    font-size: 0.75em;
    font-style: normal;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    background-color: #4F4F4F;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    background-image: -moz-radial-gradient(20px 25px 45deg, circle cover, #9e9e9e 0%, #4F4F4F 100%);
    background-image: -webkit-radial-gradient(20px 25px, circle cover, #9e9e9e, #4F4F4F );
    background-image: radial-gradient(20px 25px 45deg, circle cover, #9e9e9e 0%, #4F4F4F 100%);
    -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
    box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
  }
}
  • Unknown's avatar
    patriciaundbeni · Member ·

    dear hallluke
    thanks for the feedback, will check the logo in the navigation bar….
    as for the back to home top button – great. is it possible to change the text “back to top” with an arrow showing to the top? and is it possible to have the botton only visible starting at panel 1? so that you don’t see the bottom when you’re on the top / static page?

1 2
  • The topic ‘Need CSS help for homepage adjustments’ is closed to new replies.