Moving Authorbox in Oxygen theme

julienlemarchal · Member · Nov 25, 2014 at 1:40 pm
Copy link

Add topic to favorites
Hello all,

I’d like to put the authorbox at the top of the page, after the title of the post. My authorbox is managed by “After post” widget :

https://en.forums.wordpress.com/topic/adding-an-author-box-in-oxygen-theme?replies=8#post-1907588

Is this possible?

Thank you in advance for your help

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Nov 25, 2014 at 9:04 pm
Copy link
@julienlemarchal, although this can be done with CSS absolute positioning, using that CSS means that the moved element loses its relationships with all other elements of the web page, so it will not flow and move or change position. In essence, it floats independently above all other things on the page. The main problem is, post titles can vary quite a bit in length, from a single line to two or three lines, and the authorbox would not move and change position with that change in title length, so we would have to plan for a worst case scenario of say, 3 lines. On posts with a single line or two line title, then there would be blank white space between the title and the author box. If you had a post title that ran to 4 lines, then it would overlap the authorbox.

I would suggest keeping it in the after post location.

And sorry for the long winded reply, but the issue is sort of complex to explain.
julienlemarchal · Member · Nov 26, 2014 at 10:26 am
Copy link
Hello @thesacredpath , thanks for your response, I understand the issue.

Would it be possible to move it to the top of the right column widget or would it be the samed problem?
thesacredpath · Member · Nov 26, 2014 at 5:04 pm
Copy link
Since it is being done in a text widget, you can place that widget in the widget area of your choice and place it in the order you wish. You would probably want to design it a little differently since the sidebar is narrower.
julienlemarchal · Member · Nov 27, 2014 at 8:17 am
Copy link
Hello ! Yes i think i need a few changes…what change in code would you advice considering the actual CSS ?
```
.authorbox {
	border-top: 1px solid #cccccc;
 	padding-top: 20px;
}
.authorpic {
	float: left;
	padding-right: 20px;
	width: 100px;
	height: 100px;
}
```
Thanks in advance for you help !
julienlemarchal · Member · Nov 28, 2014 at 9:10 am
Copy link
Hello all,

I changed the image size ; i would like to change two others things :

how can I center the image?
can i add a blank line between image and text?

You can find an example of this new authorbox here :

http://blog.d2-si.fr/2014/11/25/reinvent-2014/

Thanks for your help !
thesacredpath · Member · Nov 28, 2014 at 10:16 pm
Copy link
In your custom CSS, change the add text-align: center; to .authorbox such as this
```
.authorbox {
    border-top: 1px solid #ccc;
    padding-top: 20px;
    text-align: center;
}
```
and add this to set the text in the authorbox to left alignment and put some top margin on it.
```
.authorbox p {
    text-align: left;
    margin-top: 20px;
}
```
Make sure the .authorbox p rule is after the .authorbox rule.
julienlemarchal · Member · Dec 1, 2014 at 8:19 am
Copy link
Hello !

Thanks for you help, it works fine ! :)
thesacredpath · Member · Dec 1, 2014 at 9:08 pm
Copy link
You are welcome.

No items found.