Title: Modifying Design
Last modified: August 21, 2016

---

# Modifying Design

 *  [samidmatt](https://wordpress.org/support/users/samidmatt/)
 * (@samidmatt)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/modifying-design/)
 * Hi, I have a question:
 * 1- Let’s say I want to change the design, how could I do this? For example, if
   I use the firebug addon, I see that a particular rectangle – which is the header–
   has this class: fwidgets. This particular rectangle basically looks like an image,
   which serves as the header for every page.
 * This is what I don’t understand, how could I actually replace it? I know how 
   to make it so it’s invisible, but if I wanted to add an actual image, and thus
   create a real design, how could I do that? And I don’t mean adding the image 
   itself as a background image via the fwidgets class. But rather, adding a brand
   new one.
 * I know how to incorporate anything via the pages and all, using HTML/CSS/JS etc..
   But, actually adding design to the theme itself, I have no clue.

Viewing 13 replies - 1 through 13 (of 13 total)

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [11 years, 11 months ago](https://wordpress.org/support/topic/modifying-design/#post-5032278)
 * Have you read about Child Themes: [http://codex.wordpress.org/Child_Themes](http://codex.wordpress.org/Child_Themes)?
 *  Thread Starter [samidmatt](https://wordpress.org/support/users/samidmatt/)
 * (@samidmatt)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/modifying-design/#post-5032287)
 * Yes. The theme I have is a child theme, which I want to be able to modify so 
   I can practice creating/modifying WP sites.
 * That link doesn’t explain what I’m looking to do. It allowed me to create a child
   theme and make some mods, but not what I wrote in my OP.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [11 years, 11 months ago](https://wordpress.org/support/topic/modifying-design/#post-5032288)
 * Okay so you want to replace an image that’s referenced in CSS. To do this create
   an images folder in your Child Theme if it’s not there already, then put your
   image (that you want to replace) in there, and then you can reference that image
   in your Child Theme style.css file by overriding the current style.
 *  Thread Starter [samidmatt](https://wordpress.org/support/users/samidmatt/)
 * (@samidmatt)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/modifying-design/#post-5032289)
 * I don’t want to replace an image. I want to ADD an image. I can easily use CSS
   to “remove” the coloured rectangle (which is what it is for now). But, adding
   an image is where I’m lost. Normally this would be very easy using HTML while
   hardcoding it. But using WP to do it, I’m having trouble doing that.
 * EDIT: I realize I could probably add an image as background in the class, but
   I don’t want to do that. I want to be able to add multiple images if need be.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [11 years, 11 months ago](https://wordpress.org/support/topic/modifying-design/#post-5032290)
 * It’s not clear what exactly your problem is, what is stopping you from adding
   an image?
 *  Thread Starter [samidmatt](https://wordpress.org/support/users/samidmatt/)
 * (@samidmatt)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/modifying-design/#post-5032291)
 * I created one, yes.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [11 years, 11 months ago](https://wordpress.org/support/topic/modifying-design/#post-5032293)
 * > EDIT: I realize I could probably add an image as background in the class, but
   > I don’t want to do that. I want to be able to add multiple images if need be.
 * You need to link to a specific example of this then, I can’t generalise an answer
   for you.
 *  Thread Starter [samidmatt](https://wordpress.org/support/users/samidmatt/)
 * (@samidmatt)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/modifying-design/#post-5032296)
 * Ok, say this theme: [http://demo.fabthemes.com/revera/](http://demo.fabthemes.com/revera/)
 * Imagine replacing the colour background and adding an image there.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [11 years, 11 months ago](https://wordpress.org/support/topic/modifying-design/#post-5032297)
 * Why wouldn’t your CSS work:
 *     ```
       .fwidgets {
        background: url("images/your-image.png");
       }
       ```
   
 * ?
 *  Thread Starter [samidmatt](https://wordpress.org/support/users/samidmatt/)
 * (@samidmatt)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/modifying-design/#post-5032298)
 * I don’t want to use CSS to modify this. I am talking about adding multiple images.
   Adding one as background image is one thing, but adding new ones, such as specific
   shapes, elegant borders etc. cannot be added via that method.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [11 years, 11 months ago](https://wordpress.org/support/topic/modifying-design/#post-5032300)
 * Oh okay, so this will be specific to how your theme is set up. Which theme are
   you using?
 * If your theme doesn’t encompass for that then you could create your own “background
   image” custom field in the dashboard, using [some relevant plugin](http://wordpress.org/plugins/advanced-custom-fields/),
   and then pull that image out into your HTML. For example:
 *     ```
       <?php
       // Pseudo code
       $background_image = get_custom_field('background_image');
       if ($backround_image) {
           $style = "background: url(' . $background_image . ')";
       }
       ?>
       <div style="<?php echo $style ?>"> ... </div>
       ```
   
 *  Thread Starter [samidmatt](https://wordpress.org/support/users/samidmatt/)
 * (@samidmatt)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/modifying-design/#post-5032322)
 * When you speak about placing a div somewhere, this would imply placing HTML coding
   inside a “post” or “page”. But, I’m not trying to do this. I’d like to be able
   input my own design, and thus add some images and what not within the child-theme.
   I don’t want to deal with WP from the admin area.
 * Unless you mean placing it in a specific WP .php page, I wouldn’t know which 
   one you’re referring to.
 *  Thread Starter [samidmatt](https://wordpress.org/support/users/samidmatt/)
 * (@samidmatt)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/modifying-design/#post-5032325)
 * I was able to use the following in a new header.php in the child-theme:
 * `<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/image.jpg" />`
 * Though I am very interested in understanding more what you are trying to say.
   Perhaps I could play with your code, if only I had more information about what
   you wanted me to do with it.

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘Modifying Design’ is closed to new replies.

## Tags

 * [changing](https://wordpress.org/support/topic-tag/changing/)
 * [from](https://wordpress.org/support/topic-tag/from/)
 * [modifying](https://wordpress.org/support/topic-tag/modifying/)
 * [scratch](https://wordpress.org/support/topic-tag/scratch/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 13 replies
 * 2 participants
 * Last reply from: [samidmatt](https://wordpress.org/support/users/samidmatt/)
 * Last activity: [11 years, 11 months ago](https://wordpress.org/support/topic/modifying-design/#post-5032325)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics