Need help? Check out our Support site, then


Custom widget titles

  1. 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.

  2. 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/

  3. 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.

  4. 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.

  5. Thanks!

  6. You are welcome.

  7. Help still needed!

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

  9. Up! Help still needed!

  10. 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.

  11. 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;
    }
  12. Oh darn, I did the site title and not widget titles…

  13. 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

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

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

  16. @timethief, thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic