The default colour scheme for DevUp won’t be to everyone’ taste.
Luckily, it is possible to change the colour of every element of the theme.
It is also possible to change the text and add additional widgets to the side bar.
To customise the theme go to Appearance -> Customize.
Below are all the options you can customise and what they do:
Site Title: This is the name of your site and will appear in the side bar, in the top bar on small devices and in the browser title.
Tagline: This appear in the side bar underneath your site title and in the browser title when you are on the homepage of your site.
Site Icon: This will appear in most browsers next to the URL and is used if someone saves your website as an app on their phone.
In addition to the site title and tagline it is also possible to change some theme text in other areas.
Footer Text: This appears in the footer of theme and can be used for text such as a small disclaimer.
Sticky Text: If you create a sticky post (a post that stays at the top of the blog feed) it will have a label with “STICKY POST”. You might want to change this to something like “FEATURED”.
There are a lot of colours that can be changed in the DevUp theme to completely change the look.
Header Text Color: This is the color of the website name in the side bar and in the top bar on small devices.
Background Color: This is the main background color of the website for the main body of content.
Text Color: This is the text color for the main body and will be used for articles and pages.
Link Color: This is the color of links in the main body.
Link Hover Color: This is the color of links when you hover over them in the main body.
Link Visited Color: This is the color of links for visted page in the main body.
Tagline Text Color: This is the color of the website tagline (tagline) shown in the sidebar.
Post Header Text Color: The color of headers in your posts.
Post Header Link Text Color: The color of header links such as on your home page.
Post Header Link Hover Text Color: The color of header links when you hover over them.
Post Header Link visited Text Color: The color of headre links for visited pages.
Sidebar Link Color: This is the color of links shown in th sidebar.
Sidebar Background Color: This is the color of the sidebar and is also used for the top bar on small devices.
Sidebar Widget Title Color: This is the color used for titles in the sidebar.
Sidebar Search Background Color: This is the background color for the search text box in the sidebar.
Sidebar Search Text Color: This is the text color used in the search box when typing.
Nav Bar Seperator Color: This is the color of the seperator on the hamburger icon used to toggle the side bar on small devices.
Button Color: This is the color of buttons for things like Go on the search box and pagination.
Button Hover Color: This is the color of the button when you hover over it.
Button Text Color: This is the text color of the button.
Button Text Hover Color: This is the color of the text on buttons when you hover over them.
Footer Background Color: The background color of the footer at the bottom of the page.
Footer Text Color: The color of text in the footer at the bottom of the page.
Footer Link Color: The color of links in the footer.
Footer Link Hover Color: The color of links when you hover over them in the footer.
Pagination Background Color: The background color behind the pagination buttons below each post.
Post Date Color: The color of the author and posted date underneath the post title.
Sticky Background Color: The color of the Sticky content label.
Sticky Text Color: the text color of the Sticky content label.
Blockquote Text Color: The color of text inside a quote.
Blockquote Border Color: The color of the left border on quotes.
Here are some examples of what a new colour scheme can look like:
DevUp has a built in syntax highlighter with support for 45 languages. There are also 7 different themes for the syntax highlighter so you can pick the one that suits your site. You can also turn off syntax highlighting if you plan on using a third party plugin.
The following languages are supported:
There are 7 syntax themes supplied. The Default theme is exclusive to the DevUp theme but the other 6 come from Prism JS and use MIT licenses.Default:Light:Dark:Okaidia:Solarized Light:Tomorrow:Twilight:
The header image is displayed in the sidebar above the site title. The recommended size for the header image is 150X150 pixels.
There are 2 additional options:
Image Alignment: You have the choice of Left, Right and Center aligned.
Border Radius: This is the size of the rounded edges on the image. Sliding to the left will give you less rounded edges and sliding to the right will crop the image into a circle.
The background image is displayed behind the content on your site. If you choose to have a background image you will also get a choice on how you want the image repeated or positioned.
There 2 menu positions in the DevUp theme.
Primary: This menu is on the side bar underneath the Site Title and Tagline. If you want to create menu in a different location on the sidebar you can do this with the Custom Menu widget.
Footer: This menu is in the footer above the footer text.
By default the menus will show the site pages. If you don’t want a menu to show you can create a blank menu and assign it to these locations.
There is currently only one place for widgets and this is in the sidebar underneath the menu.
The Static Front Page section gives you the option to either show your latests posts on the front page or select a static page as your homepage.