php - HTML to Wordpress: Add category block over featured image -
I am currently playing with html, css and wordpress. So far, the site homepage on HTML and CSS has been completely done, so I started porting it to WP. The problem is that I
HTML:
A class = "category" href = "/ category.html" & gt; & Lt; Span & gt; Category & lt; / Span & gt; & Lt; / A & gt; & Lt; / Div & gt; CSS:
.featured-image {status: absolute; Display: Inline; Width: 640px; Height: 100 pixels; Z-index: 0; } .category {font-size: 20px; Color: #fff; Text align: center; Vertical-row: middle; Text-transform: uppercase; Text-decoration: None; Status: Relative; Display area; float right; Width: 90px; Line-height: 100px; Background color: # 555; Opacity: 0.2; Z-index: 1; Word-wrap: break-word; }. Category Duration {Display: Inline-Block; Line-height: 1 AM; Width: 90px; Vertical-row: middle; }
I still have WordPress on:
& lt; Div class = "post-thumb" & gt; & Lt ;? Php if (has_post_thumbnail ()) {the_post_thumbnail ();}? & Gt; & Lt; Span class = "new-wrapper" & gt; & Lt ;? Get Php // First Class Name $ Category = get_the_category (); $ Range echo [0] - & gt; Cat_name; ? & Gt; & Lt; / Span & gt; & Lt; / Div & gt;
CSS:
. New-wrapper {background color: black; White color; Font-size: 12px; Status: Completed; Vertical-row: middle; Bottom: 0 pixels; Top: 0 pixels; Correct: -20px; Padding-left: 10px; Padding: 10px; -moz-opacity: .80; Filters: alpha (opacity = 80); Opacity: .80; Width: Multiplied 90px; Display area; } .post-thumb {float: left; Status: Relative; Width: 640px; Hidden flurry; }
Any help with this?
I do not recommend overwriting the old template made from your template empty folder. Sources would like this:
& lt; Div & gt; & Lt ;? Php if (has_post_thumbnail ()) {the_post_thumbnail ();}? & Gt; & Lt; A class = "category" href = "/ category.html" & gt; & Lt; Period & gt; & Lt ;? Get Php // First Class Name $ Category = get_the_category (); $ Range echo [0] - & gt; Cat_name; ? & Gt; & Lt; / Span & gt; & Lt; / A & gt; & Lt; / Div & gt;
.. The css source you can copy into the original file.
Comments
Post a Comment