Title: Adding a Paper Looking TextBox Last modified: August 21, 2016 --- # Adding a Paper Looking TextBox * [rtatham](https://wordpress.org/support/users/rtatham/) * (@rtatham) * [12 years, 7 months ago](https://wordpress.org/support/topic/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 Viewing 15 replies - 1 through 15 (of 25 total) 1 [2](https://wordpress.org/support/topic/adding-a-paper-looking-textbox/page/2/?output_format=md) [→](https://wordpress.org/support/topic/adding-a-paper-looking-textbox/page/2/?output_format=md) * [esmi](https://wordpress.org/support/users/esmi/) * (@esmi) * [12 years, 7 months ago](https://wordpress.org/support/topic/adding-a-paper-looking-textbox/#post-4166239) * You could use CSS to apply a background image of some notepaper to the box. * Thread Starter [rtatham](https://wordpress.org/support/users/rtatham/) * (@rtatham) * [12 years, 7 months ago](https://wordpress.org/support/topic/adding-a-paper-looking-textbox/#post-4166306) * Hmm how would I go about structuring that. This is what i us now for the text boxes *
Text Here
* [WPyogi](https://wordpress.org/support/users/wpyogi/) * (@wpyogi) * [12 years, 7 months ago](https://wordpress.org/support/topic/adding-a-paper-looking-textbox/#post-4166307) * 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](http://www.w3schools.com/css/css_background.asp) * Also, CSS should be added via a child theme or custom CSS (theme option or plugin). * Thread Starter [rtatham](https://wordpress.org/support/users/rtatham/) * (@rtatham) * [12 years, 7 months ago](https://wordpress.org/support/topic/adding-a-paper-looking-textbox/#post-4166380) * { background-image:url(‘[http://robedwards.net/wp-content/uploads/2013/09/note.jpg’](http://robedwards.net/wp-content/uploads/2013/09/note.jpg’););} * ? * Thread Starter [rtatham](https://wordpress.org/support/users/rtatham/) * (@rtatham) * [12 years, 7 months ago](https://wordpress.org/support/topic/adding-a-paper-looking-textbox/#post-4166381) * Here is an example of how i want it to look * [http://snailfactorydesigns.net/?attachment_id=139](http://snailfactorydesigns.net/?attachment_id=139) * [WPyogi](https://wordpress.org/support/users/wpyogi/) * (@wpyogi) * [12 years, 7 months ago](https://wordpress.org/support/topic/adding-a-paper-looking-textbox/#post-4166383) * 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? * Thread Starter [rtatham](https://wordpress.org/support/users/rtatham/) * (@rtatham) * [12 years, 7 months ago](https://wordpress.org/support/topic/adding-a-paper-looking-textbox/#post-4166384) * 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 * [WPyogi](https://wordpress.org/support/users/wpyogi/) * (@wpyogi) * [12 years, 7 months ago](https://wordpress.org/support/topic/adding-a-paper-looking-textbox/#post-4166385) * 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? * Thread Starter [rtatham](https://wordpress.org/support/users/rtatham/) * (@rtatham) * [12 years, 7 months ago](https://wordpress.org/support/topic/adding-a-paper-looking-textbox/#post-4166386) * MEETA by WPZoom * [http://snailfactorydesigns.net/wp-content/uploads/2013/09/meeta.jpg](http://snailfactorydesigns.net/wp-content/uploads/2013/09/meeta.jpg) * Thread Starter [rtatham](https://wordpress.org/support/users/rtatham/) * (@rtatham) * [12 years, 7 months ago](https://wordpress.org/support/topic/adding-a-paper-looking-textbox/#post-4166387) * 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 * [WPyogi](https://wordpress.org/support/users/wpyogi/) * (@wpyogi) * [12 years, 7 months ago](https://wordpress.org/support/topic/adding-a-paper-looking-textbox/#post-4166388) * 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: * ```
Text Here
``` * Unless you post a link to a page/post where you’ve tried this, I really don’t know what else to suggest. * Thread Starter [rtatham](https://wordpress.org/support/users/rtatham/) * (@rtatham) * [12 years, 7 months ago](https://wordpress.org/support/topic/adding-a-paper-looking-textbox/#post-4166389) * [http://snailfactorydesigns.net/?p=140&preview=true](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’](http://snailfactorydesigns.net/wp-content/uploads/2013/09/note.jpg’););} * Hit update. Then went to the post and dropped in
hey * But on preview it just shows hey * [WPyogi](https://wordpress.org/support/users/wpyogi/) * (@wpyogi) * [12 years, 7 months ago](https://wordpress.org/support/topic/adding-a-paper-looking-textbox/#post-4166390) * 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; } ``` * Thread Starter [rtatham](https://wordpress.org/support/users/rtatham/) * (@rtatham) * [12 years, 7 months ago](https://wordpress.org/support/topic/adding-a-paper-looking-textbox/#post-4166391) * 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 * Thread Starter [rtatham](https://wordpress.org/support/users/rtatham/) * (@rtatham) * [12 years, 7 months ago](https://wordpress.org/support/topic/adding-a-paper-looking-textbox/#post-4166421) * Do you know how I could alter the sites main banner to be slimmer? * Theme: Meeta Site: snailfactorydesign.net Viewing 15 replies - 1 through 15 (of 25 total) 1 [2](https://wordpress.org/support/topic/adding-a-paper-looking-textbox/page/2/?output_format=md) [→](https://wordpress.org/support/topic/adding-a-paper-looking-textbox/page/2/?output_format=md) The topic ‘Adding a Paper Looking TextBox’ is closed to new replies. * 25 replies * 4 participants * Last reply from: [Giulio Daprela](https://wordpress.org/support/users/daprela/) * Last activity: [12 years, 7 months ago](https://wordpress.org/support/topic/adding-a-paper-looking-textbox/page/2/#post-4166450) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics