WordPress.org

Support

Support » Themes and Templates » Spun » [Resolved] Turn Page Links in Buttons

[Resolved] Turn Page Links in Buttons

Viewing 13 replies - 1 through 13 (of 13 total)
  • Which links are you referring to, specifically?

    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!!!

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

    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);
    
    }

    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!!!

    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.

    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

    Don’t worry about the HTML

    Sorry! …should read AND how do I specify…

    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!!!

    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 {

    A-ha! I will try that now.

    Thank you.

    Awesome Sauce, Dude!!!

    Thank you, thank you, thank you!

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘[Resolved] Turn Page Links in Buttons’ is closed to new replies.
Skip to toolbar