Custom widget titles

  • Author
    Posts
  • #1246236

    niinamaria
    Member

    I tried to find an answer from old threads but couldn’t so I’m pestering you peeps second time tonight.

    Again I got inspired by the Flora&Fauna-theme. I liked how the widget titles were bold on yellow background. How can I achieve that? My current guess is that I remove the name of the widget ie. Blogs I follow and then add above a text widget image, the same way I did About, Pinterest, Facebook etc. links.
    Or is there a smarter way of doing that?

    The blog I need help with is thriftyfinn.wordpress.com.

    #1246342

    timethief
    Member

    That font change can be made if you buy an annually renewable custom design upgrade and do the required CSS editing.
    http://en.support.wordpress.com/custom-design/
    http://en.support.wordpress.com/custom-design/editing-css/
    http://en.support.wordpress.com/custom-design/custom-fonts/

    #1246354

    niinamaria
    Member

    I do have the upgrade and I know how to change the font. My question was more how to get the title to look more like a tab, if you know what I mean.

    #1246357

    timethief
    Member

    Please post the URL for the blog you are doing the CSS editing on. I tagged this thread so it will be moved to the CSS Forum where you can get the help you need.

    #1246358

    niinamaria
    Member

    Thanks!

    #1246360

    timethief
    Member

    You are welcome.

    #1246389

    niinamaria
    Member

    Help still needed!

    #1246454

    timethief
    Member

    Hi there,
    It’s the weekend so please be patient while waiting for CSS editing help.

    #1246485

    niinamaria
    Member

    Up! Help still needed!

    #1246486

    timethief
    Member

    This is a peer support forum where Volunteers and Staff work cooperatively to deliver WordPress.com support. There is no phone support here. Volunteers answer most questions posted into forum threads and Staff monitor. When Volunteers cannot provide the required support we flag threads for Staff attention.

    The custom design upgrades come with Staff support. There are others waiting who posted before you did. When we create a support ticket by contacting Support Staff by using the contact link http://en.support.wordpress.com/contact/ or by flagging a thread here in the forums for their assistance it’s important to understand they have a backlog.

    They deal with the support tickets, emails and threads on these peer support forums with the earliest dates first. So if we contact them more than once on the same issue or if we bump threads or if we create duplicate threads the date moves forward and it takes longer to get help.

    #1246509

    The site title styling in Flora & Fauna is done with CSS. Pretty cool!

    So you can almost copy the CSS in the “=Header” section of the Flora & Fauna theme exactly since the naming conventions in the CSS for each theme are very similar:
    https://s1.wp.com/wp-content/themes/premium/flora-and-fauna/style.css?m=1366903084g&minify=false

    I made two modifications. (1) I added a big bottom margin to the hgroup element to give the Twenty Twelve site titel more room, and (2) I added “!important” on the text-align property to get it to center correctly.

    .site-header {
    	margin: 0 auto;
    	position: relative;
    	width: 100%;
    	z-index: 1;
    }
    .site-header hgroup {
    	margin-bottom: 4em;
    }
    .site-title {
    	background: #f8ae32;
    	display: block;
    	font-family: Sanchez, Courier, monospace;
    	font-size: 36px;
    	font-size: 3.6rem;
    	margin: 0 auto;
    	max-width: 800px;
    	padding: 0 20px;
    	position: relative;
    	text-align: center !important;
    	text-transform: uppercase;
    }
    .site-title a {
    	color: #fff;
    	display: block;
    	padding: 10px 0;
    	position: relative;
    	text-decoration: none;
    	width: 100%;
    }
    .site-title:before,
    .site-title:after {
    	content: "";
    	display: block;
    	position: absolute;
    		bottom: -40px;
    	width: 0;
    	height: 0;
    }
    .site-title:before {
    	border-top: 40px solid #72c1c0;
    	border-left: 40px solid transparent;
    	border-right: 90px solid #72c1c0;
    	border-bottom: 40px solid #72c1c0;
    	left: -60px;
    	z-index: -1;
    }
    .site-title:after {
    	border-top: 40px solid #72c1c0;
    	border-right: 40px solid transparent;
    	border-left: 90px solid #72c1c0;
    	border-bottom: 40px solid #72c1c0;
    	right: -60px;
    	z-index: -1;
    }
    .site-title a:before,
    .site-title a:after {
    	content: "";
    	display: block;
    	position: absolute;
    		top: 100%;
    	width: 0;
    	height: 0;
    }
    .site-title a:before {
    	border-style: solid;
    	border-width: 0 70px 40px 0;
    	border-color: transparent #ed248a transparent transparent;
    	left: -20px;
    }
    .site-title a:after {
    	border-style: solid;
    	border-width: 0 0 40px 70px;
    	border-color: transparent transparent transparent #ed248a;
    	right: -20px;
    }
    #1246510

    Oh darn, I did the site title and not widget titles…

    #1246511

    Here is how to get the widget titles in Twenty Twelve to look like the ones in Flora & Fauna :)

    .widget-title, .widgettitle {
    	background: #eac359;
    	color: #fff;
    	display: block;
    	font-size: 14px;
    	margin: 0 0 1.5em;
    	padding: .75em 0;
    	text-align: center;
    	text-transform: uppercase;
    	width: 100%;
    }

    … much easier than the site title! lol

    #1246512

    niinamaria
    Member

    Thank you so much! My next question would have been about the site title anyway!!! :D

    #1246513

    timethief
    Member

    @designsimply
    Totally off topic:
    I like the new gravatar without the hat. Your hair is lovely. :)

    #1246516

    @timethief, thanks!

The topic ‘Custom widget titles’ is closed to new replies.