How do I customize the "page-title" Div in Chunk?

lornastasiw · Member · Apr 16, 2013 at 1:53 am
Copy link

Add topic to favorites
What I want to do is move the “page-title” so that it lines up under the “Portfolio” link, and remove the rounded edges of the box. What should I use in the CSS so it’s customized that way?

http://lornastasiw.com/category/branding/

The blog I need help with is: (visible only to logged in users)
metacomcreative · Member · Apr 16, 2013 at 2:06 am
Copy link
You should be able to add the following to your CSS:

.page-title { text-align: right; }

.page-title h2 {
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}

The first part will align the page title to the right, and the second will remove the rounded corners.
metacomcreative · Member · Apr 16, 2013 at 2:10 am
Copy link
Hm, it looks like my above post didn’t save correctly. Let me try again:
```
.page-title {
	text-align: right;
}

.page-title h2 {
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}
```
If that didn’t work correctly, you can view it in a Gist here: https://gist.github.com/RCowles/7355fe2b8f2244459728
lornastasiw · Member · Apr 16, 2013 at 1:19 pm
Copy link
What about to get rid of the box altogether?
lornastasiw · Member · Apr 16, 2013 at 1:48 pm
Copy link
If you see on the page (http://lornastasiw.com/category/branding/), the page-title is now inside of a block, but there is a box surrounding the text. How do I get rid of it altogether?

Also, can I customize the text so there is no “Filed Under” and “…”?
Basically, I want it to look like there is a bar with the page’s title inside of it.
lornastasiw · Member · Apr 16, 2013 at 1:49 pm
Copy link
(“….get rid of it altogether?” ) …”it” being the box surrounding the text.
metacomcreative · Member · Apr 16, 2013 at 3:13 pm
Copy link
Hi Lorna,

If I understand correctly, you are trying to get rid of the small, gray box that wraps around the title. You can do so with the following CSS:
```
.page-title h2 {
	background: none;
}
```
That should do the trick!
lornastasiw · Member · Apr 16, 2013 at 4:29 pm
Copy link
Thanks!
metacomcreative · Member · Apr 16, 2013 at 5:22 pm
Copy link
You’re welcome :)
justpi · Member · Apr 17, 2013 at 12:38 am
Copy link
As for this:

can I customize the text so there is no “Filed Under” and “…”?

here’s one way I thought of:

Add this rule to .page-title:
position:relative;

And add this code as well:
```
.page-title h2 span {
    background-color: #ff3333;
    color: #ffffff;
    padding-right: 20px;
    position: absolute;
    right: 0;
    width: 70%;
 }
```
lornastasiw · Member · Apr 17, 2013 at 1:52 am
Copy link
awesome! thanks very much.

No items found.