Adding a Paper Looking TextBox
-
Im trying to figure out how I could add in a Text Box but have the background look like a notepad with lines. Please help
-
You could use CSS to apply a background image of some notepaper to the box.
Hmm how would I go about structuring that. This is what i us now for the text boxes
<div class=”yellowbox”>Text Here</div>
You can use that class in the CSS:
.yellowbox { background-image:url('FILE PATH TO YOUR IMAGE'); }More info on the CSS:
http://www.w3schools.com/css/css_background.asp
Also, CSS should be added via a child theme or custom CSS (theme option or plugin).
{
background-image:url(‘http://robedwards.net/wp-content/uploads/2013/09/note.jpg’);
}?
Here is an example of how i want it to look
And the code I posted above should do that – but you need to use the class as the CSS selector. Where is the page you’ve tried it on?
Im a bit lost on what you mean adding it through css. Like in the editor change the it to that coding instead of posting it directly into the post coding section
Generally, CSS should be added in Custom CSS or by using a child theme – so that the changes are not lost when the theme is updated. But what theme are you using?
If I was to create an entire new set of code and div how would i set that up and where would I drop it. I thank you for your help by the way. It good to learn these things from a master
You should not be modifying theme files at all.
Add a custom CSS plugin and ADD the CSS I posted above there.
The in your post (using the TEXT editor) put:
<div class="yellowbox">Text Here</div>Unless you post a link to a page/post where you’ve tried this, I really don’t know what else to suggest.
http://snailfactorydesigns.net/?p=140&preview=true
Test page. I downloaded a simple custom css plugin. I dropped in .yellowbox {
background-image:url(‘http://snailfactorydesigns.net/wp-content/uploads/2013/09/note.jpg’);
}Hit update. Then went to the post and dropped in
<div class=”yellowbox”>hey</div>But on preview it just shows hey
Looks like link you used for that image is not valid – it shows up as this:
(" 9;http://snailfactorydesigns.net/wp-content/uploads/2013/09/note.jpg 9;");Note that I added spaces in the code above so it would not be parsed here.
Looks like fixing that URL makes the image background work fine. Try also giving it a height for the moment – so more shows up:
.yellowbox { background-image: url("http://snailfactorydesigns.net/wp-content/uploads/2013/09/note.jpg"); height: 50px; }Thank you brother! that it! your a life savor now if i could only figure where to edit to get the snail factory designs logo banner slimmer
Do you know how I could alter the sites main banner to be slimmer?
Theme: Meeta
Site: snailfactorydesign.net
The topic ‘Adding a Paper Looking TextBox’ is closed to new replies.