Button help! to a square and colour change

  • Unknown's avatar
    manuelborgesmusic · Member ·

    hey guys,

    i just want to change my buttons on my site (sound ->) to a square. And then switch the colours exactly as they are now. From empty to white when browse with your mouse.

    Thanks for the help.
    Manu

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

  • melindahelt · Staff ·

    Hello!

    If you have the premium or business plan that enables you to edit the css code, add the following bits of code into the CSS editor. Here’s a link on where to add the css code: wordpress custom css editor plugin https://en.support.wordpress.com/custom-design/#custom-css

    This first section will change the border-radius from 2 to 0. 0 will give it square corners and the higher the number, the more oval or circle it will become.

    button {
    border: 2px solid transparent;
    border-radius: 0em;
    display: inline-block;
    font-size: 0.95rem;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 1;
    padding: 1em 3em;
    text-shadow: none;
    text-transform: uppercase;
    transition: background-color 0.125s ease-in;
    -webkit-appearance: none;
}

    This next bit of code will reverse the colors. the first one is the regular state of the button and the :hover state is what will happen when you mouse over the button.

    .button.minimal {
	background-color: transparent;
    border-color: #eff6f9;
    color: #eff6f9;
}

.button.minimal:hover {
 	background-color: #eff6f9;
    color: #83b6cc;

}

    Hope this helps!

  • Unknown's avatar
    manuelborgesmusic · Member ·

    Hi,

    The colour worked fine :)

    But the boarder code doesn’t work

    button {
    border: 2px solid transparent;
    border-radius: 0em;
    display: inline-block;
    font-size: 0.95rem;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 1;
    padding: 1em 3em;
    text-shadow: none;
    text-transform: uppercase;
    transition: background-color 0.125s ease-in;
    -webkit-appearance: none;
    }

  • melindahelt · Staff ·

    Try adding the border-radius line to your .button.minimal CSS

    So it would look like this:

    .button.minimal {
   background-color: transparent;
   border-radius:0;
    border-color: #eff6f9;
    color: #eff6f9;
}
  • Unknown's avatar
    manuelborgesmusic · Member ·

    Thank you so much! helped perfectly.

  • Unknown's avatar
    manuelborgesmusic · Member ·

    your help was so great, could I ask you more questions :D

    I´m nearly finished with my homepage. Now I need some last help from you guys  1. My Logo is too small. I cant change the size because it always rezies. Its an PNG so it should be going very big. 2. on my Panel “Gear” is a slideshow, but there is a frame behind it. Also I would like the pictures to be a little bit smaller. 3. The contact form ist not quiet there. Its blue when I write in it. And The Submit button should change the opposite from transparent to color when going over with the mouse. also the Textfield is blue with blue text. 4. Can I put my social media buttons to the top menu? I mean the signs like in the footer? That’s it for now 

    Thank you Guys Manu
    you can get back to me via email thats fine for me :)
    (email visible only to moderators and staff)
    the site is http://www.manuelborgesstudio.com

  • melindahelt · Staff ·

    Hi!

    Here’s some additional code to help with some of your issues.

    If you’d like to learn more about editing CSS to make some of these customizations, take a look at some of the following resources, especially the CSS help section at the bottom of the page: https://en.support.wordpress.com/custom-css/ and https://en.support.wordpress.com/custom-design/css-basics/

    Logo
    Your logo size is dictated by your theme, so you can’t change the size. The high is pre-set. Because your logo is a square, that’s as big as it will appear. If you create your logo in more of a rectangle size (like the theme demo) then it will be a little larger/easier to read.

    Social Media Icons
    Your theme does not include a way to add social media icons to the top of the site, only to the footer area.

    Slideshow
    Go into your page that contains the gallery and edit the gallery settings. From there there’s a dropdown menu for Size and you can select a smaller size there.

    Then, adding the following code to your css editor should remove the black background. 

    .slideshow-window {
    background-color: transparent;
    border: none;

    Contact form section
    First, add the following code to your css editor. This should take care of the blue on blue boxes in the contact form.

    input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
    background-color: #fff;
}

input[type="text"]:focus{
color: #000;
}

    Next, edit your existing .button.minimal to add in the input[type=”submit”] as shown below. Do not just copy this text over again, but edit the part that you already have.

    .button.minimal,
input[type="submit"]  {
   background-color: transparent;
   border-radius:0;
    border-color: #eff6f9;
    color: #eff6f9;
}

.button.minimal:hover,
input[type="submit"]:hover {
 	background-color: #eff6f9;
    color: #83b6cc;

}
  • The topic ‘Button help! to a square and colour change’ is closed to new replies.