WordPress.org

Ready to get started?Download WordPress

Forums

Spun
[resolved] Turn Page Links in Buttons (14 posts)

  1. GroceryGirl
    Member
    Posted 3 months ago #

    I would like to make the page links on my site http://www.therightcardandmore.com look like buttons. I know this is a pretty common change to make and easy thing to do, but I'm not quite sure how to go about it. Advice? Thanks a bunch a head of time!

  2. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 3 months ago #

    Which links are you referring to, specifically?

  3. GroceryGirl
    Member
    Posted 3 months ago #

    Hi Andrew,

    Sorry it's taken me so long to get back to you. I really do appreciate your willingness to help!

    The links I'm referring to are the page links at the top right hand corner of the home page of the blog.

    Again, the blog's URL is: http://www.therightcardandmore.com

    Right now, the page links just look like white rectangles. I'd like to turn them into buttons or give them rounded corners. Do you know how I can do that?

    Thanks a bunch!!!

  4. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 3 months ago #

    Have you seen this tool http://css3button.net/

  5. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 3 months ago #

    E.g:

    .main-navigation a {
    	color: #050505;
    	padding: 5px 10px;
    	background: -moz-linear-gradient(
    		top,
    		#ffffff 0%,
    		#ebebeb 50%,
    		#dbdbdb 50%,
    		#b5b5b5);
    	background: -webkit-gradient(
    		linear, left top, left bottom,
    		from(#ffffff),
    		color-stop(0.50, #ebebeb),
    		color-stop(0.50, #dbdbdb),
    		to(#b5b5b5));
    	-moz-border-radius: 4px;
    	-webkit-border-radius: 4px;
    	border-radius: 4px;
    	border: 1px solid #949494;
    	-moz-box-shadow:
    		0px 1px 3px rgba(000,000,000,0.5),
    		inset 0px 0px 2px rgba(255,255,255,1);
    	-webkit-box-shadow:
    		0px 1px 3px rgba(000,000,000,0.5),
    		inset 0px 0px 2px rgba(255,255,255,1);
    	box-shadow:
    		0px 1px 3px rgba(000,000,000,0.5),
    		inset 0px 0px 2px rgba(255,255,255,1);
    	text-shadow:
    		0px -1px 0px rgba(000,000,000,0.2),
    		0px 1px 0px rgba(255,255,255,1);
    
    }
  6. GroceryGirl
    Member
    Posted 3 months ago #

    THAT is VERY cool.

    Now, where do I put it when I customize blog's CSS? (That's the million dollar question, right?)

    Thanks a Ton!!!

  7. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 3 months ago #

    Install this Custom CSS Manager plugin http://wordpress.org/plugins/custom-css-manager-plugin

    Then use its "CSS Code" section of the dashboard to hold your CSS modifications.

  8. GroceryGirl
    Member
    Posted 2 months ago #

    Great!

    I noticed in designing my button that I'm given both HTML and CSS code to go along with the button.

    I've uploaded the CSS Manager you suggested and plugged the CSS code for my button in there. What shall I do with the HTML code? AND how to I let specify that it's the "pages" at the top right-hand corner of the blog I'd like to have changed into buttons.

    http://www.therightcardandmore.com

  9. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 2 months ago #

    Don't worry about the HTML

  10. GroceryGirl
    Member
    Posted 2 months ago #

    Sorry! ...should read AND how do I specify...

  11. GroceryGirl
    Member
    Posted 2 months ago #

    Okay, I won't worry about the HTML.

    Did you catch the second question? Maybe you're checking into that now, getting a cup of tea, or whatever. :)

    -Just wondering how I specify that it's the pages at the top right hand corner of the blog I'd like changed into buttons.

    THANK YOU!!!

  12. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 2 months ago #

    In your Custom CSS option you have this code:

    button.css3button {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	color: #000000;
    	padding: 10px 20px;
    	background: -moz-linear-gradient(
    		top,
    		#ffffff 0%,
    		#a1a1a1);
    	background: -webkit-gradient(
    		linear, left top, left bottom,
    		from(#ffffff),
    		to(#a1a1a1));
    	-moz-border-radius: 30px;
    	-webkit-border-radius: 30px;
    	border-radius: 30px;
    	border: 3px solid #737373;
    	-moz-box-shadow:
    		0px 3px 11px rgba(115,115,115,0.5),
    		inset 0px 0px 1px rgba(255,255,255,1);
    	-webkit-box-shadow:
    		0px 3px 11px rgba(115,115,115,0.5),
    		inset 0px 0px 1px rgba(255,255,255,1);
    	box-shadow:
    		0px 3px 11px rgba(115,115,115,0.5),
    		inset 0px 0px 1px rgba(255,255,255,1);
    	text-shadow:
    		0px -1px 0px rgba(000,000,000,0.2),
    		0px 1px 0px rgba(255,255,255,0.3);
    }

    Instead you want this code:

    .main-navigation a {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	color: #000000;
    	padding: 10px 20px;
    	background: -moz-linear-gradient(
    		top,
    		#ffffff 0%,
    		#a1a1a1);
    	background: -webkit-gradient(
    		linear, left top, left bottom,
    		from(#ffffff),
    		to(#a1a1a1));
    	-moz-border-radius: 30px;
    	-webkit-border-radius: 30px;
    	border-radius: 30px;
    	border: 3px solid #737373;
    	-moz-box-shadow:
    		0px 3px 11px rgba(115,115,115,0.5),
    		inset 0px 0px 1px rgba(255,255,255,1);
    	-webkit-box-shadow:
    		0px 3px 11px rgba(115,115,115,0.5),
    		inset 0px 0px 1px rgba(255,255,255,1);
    	box-shadow:
    		0px 3px 11px rgba(115,115,115,0.5),
    		inset 0px 0px 1px rgba(255,255,255,1);
    	text-shadow:
    		0px -1px 0px rgba(000,000,000,0.2),
    		0px 1px 0px rgba(255,255,255,0.3);
    }

    The difference being I replaced this:

    button.css3button {

    With this:

    .main-navigation a {
  13. GroceryGirl
    Member
    Posted 2 months ago #

    A-ha! I will try that now.

    Thank you.

  14. GroceryGirl
    Member
    Posted 2 months ago #

    Awesome Sauce, Dude!!!

    Thank you, thank you, thank you!

Reply

You must log in to post.

About this Theme

About this Topic