Wordpress Text Editing Dreamwiever
How Do I Edit A Wordpress Theme In Dreamweaver I've been editing my WordPress theme templates and CSS manually, I have Dreamweaver and tried to set it up with WordPress as the CreativePro tutorial. How To Editing WordPress With Dreamweaver Cs5 Posted on August 17, 2013 by Aoqy One of the most dramatic improvements to Dreamweaver CS5 is the ability edit WordPress themes, but before you can get WordPress (or Joomla! Or Drupal) to work, you’ll need to set up your computer as a Web server. WordPress is a content management system (basically a bunch of php pages) that you install on your web server – not your home computer. A website built with Dreamweaver can be uploaded to any web server. When you build a website with WordPress, the website and WordPress become one.
After you create a new page with a CSS layout in Dreamweaver, you have a seemingly infinite number of options for editing it, but first you have to determine which styles in the style sheet correspond to the elements you want to edit.
As you can probably imagine, you can edit the styles in a CSS layout in many ways to create your own designs.
After you adjust the existing styles to get the basic page design the way you want it, you can create as many additional styles as you desire.
How to check out the available styles and make basic edits
You can use these same basic instructions with any CSS layout included in Dreamweaver. To edit styles in a CSS layout, follow these steps:
Open a page file that’s based in a Dreamweaver CSS layout, and choose Window→CSS Styles (or click the CSS Designer tab to expand the panel).
The CSS Designer panel opens or expands.
Click to select the name of the style sheet in the Sources panel at the top of CSS Designer.
All the styles associated with the new page are listed in the Selectors panel.
Select the name of any style listed in the CSS Designer Selectors panel.
The corresponding CSS rules defined for the style are displayed in the Properties panel, at the bottom of the CSS Designer panel. Clicking through the list of styles and reviewing their corresponding rules is a good way to get a quick overview of the design and to see where the various page-formatting options are stored.
The HTML5 header, .nav, and footer tags control the main sections of the page. For example, the header style includes a rule that makes the background color green. Thus, to change the color of the header area at the top of the page, you change the background color setting in the header rule.
How to edit page-wide settings
To edit page-wide settings — such as the background color of the page or the main font face, size, and color of the text used throughout the page — follow these steps:
In the CSS Designer Selectors panel, select the style named body.
The properties defined in the selected style rule are displayed in the Properties panel.
Click the T icon at the top of the Properties panel, and change or add your desired font and other text settings.
You can change the font face, size, style, and weight. To change the space between lines of text, change the line height.
Scroll down to the Background area of the Properties panel and use the color well in the Background-Color field to specify a color for the entire background of the page.
Alternatively, you can enter any hexadecimal color code in the Background-Color field or use the eyedropper to sample any color. To add a background image, click in the URL field in the Background section and then click the Browse button that appears and select the image that you want to serve as the background. Use the Background-Repeat icons to specify how the background image should repeat on the page.
Make any other changes or additions to the style rule.
Changes to style rules in the Properties panel are automatically saved and applied to content formatted with the rule.
How to customize content areas
To change the width or other settings of the main content areas, which control the overall size of the page and the header, footer, and sidebar, follow these steps:
How To Setup Wordpress In Dreamweaver
To change the width of the entire main design area:
Click the .container style in the Selectors panel of the CSS Designer panel.
The properties of the .container style rule are displayed in the Properties panel, where you can also edit the style.
Change the size in the Width field or type a new number for your desired page width.
The width of the page design is automatically changed based on the size you entered. When you alter the width of the .container style, you change the width of the entire design because all the <div> tags and other elements are contained in the <div> formatted with the .container style — and they’re all set to expand to fill the .container<div>.
To alter the size of the content area of the page, select the style named .content and specify the size and other options you desire in the Properties panel.
If you change the width of the content area in a layout that includes a sidebar, you must change the width of the sidebar as well.
To change the background color of any style on the page, click the name of the corresponding style and change the settings in the Background section of the Properties panel.
For example, in the CSS layouts in Dreamweaver, the sidebar is defined in a style named .sidebar1. Thus, to change the background color, you would click .sidebar1 in the Selectors panel, select the Background category in the Properties panel, and select the color you want. Similarly, to change the background color of the header, select the style named header in the Selectors panel and use the color well.
To add an image to the header:
Select the placeholder image labeled Insert Logo and press the Delete or Backspace key.
Choose Insert →Image→Image and select an image using the Select Image Source dialog box.
Replace text and insert images in the sidebar and main content areas.
You can add or replace text and insert images in any page created from a CSS layout, just as you would in any other web page.
Choose File→Save All to save the page and styles.
Related Articles
- 1 Make Blogspot Redirect to Another Site
- 2 Change an Image Header in a Picture Window Template on Blogger
- 3 Redirecting Blogspot to Wordpress
- 4 Switch Blogger Templates to CSS
Tumblr enables access to the raw HTML of your Tumblr blog, and that means you can use an HTML editing program to make the changes if you wish. However, since the Tumblr HTML that you can customize creates a general theme that is then applied to your specific content, the preview feature of Dreamweaver will not work correctly. You can still use the HTML editor from Dreamweaver to edit and save your Tumblr theme, but you won't be able to accurately preview it until you put the code back into Tumblr.
1.Log in to Tumblr and click the gear icon at the top of the screen to access your account settings.
2.Click the name of your blog on the left, click the 'Customize' button under the Theme image and click 'Edit HTML' in the bar on the left.
Free Text Editing Online
3.Right-click on the HTML code, choose 'Select All,' right-click again and choose 'Copy.'
4.Open a plain-text editor on your computer -- like Notepad -- and paste the HTML code into a new, blank document. Save the document as the backup of your existing Tumblr code. If you need to, you can copy and paste the code from this file back to your Tumblr template.
5.Launch Dreamweaver and open a new, blank HTML file. Select all of the code in the HTML window and paste the code from your Tumblr blog over top of it. You don't want to leave any of the automatically generated HTML in the Dreamweaver HTML editor.
6.Make the changes to the HTML for your Tumblr theme. Save the Dreamweaver file. Copy and paste the text back to your Tumblr account to preview it. You don't need to make the code live on your blog to preview it -- you can simply click the green 'Update Preview' button in the Edit HTML on the Tumblr customization page to see how your changes look.
Tips
- Study Tumblr themes you like to get ideas on how to format the HTML for your blog.
- You can upload custom assets to Tumblr if you want to have your own background image or some other custom element. Click the gear icon in the Edit HTML page and choose 'Static File Uploader.'
- A list of all the variables you can customize is available from Tumblr (see link in Resources).
Resources (1)
About the Author
James T Wood is a teacher, blogger and author. Since 2009 he has published two books and numerous articles, both online and in print. His work experience has spanned the computer world, from sales and support to training and repair. He is also an accomplished public speaker and PowerPoint presenter.
Photo Credits
- Mario Tama/Getty Images News/Getty Images