How To Add Border To Top Of Blog Wordpress

Neve Documentation

Neve is a super-fast, easily customizable, multi-purpose theme. It's perfect for blogs, small businesses, startups, agencies, firms, e-commerce shops (WooCommerce) as well as personal portfolio sites and most types of projects.

Compatibilities

While it is lightweight and has a minimalist design, the theme is extendable, it has a highly SEO optimized code, resulting in top rankings in Google search results. Neve works perfectly with any editor, starting with the WordPress editor to the page builders like Elementor, Brizy, Beaver, and others. Neve is also WooCommerce, responsive, RTL & translation, and AMP ready.

Look no further. Neve is the perfect theme for you!

📩 Download and Install Neve

To download and install Neve, make sure you follow the steps below:

1

Navigate to Neve's page and click on the Free Download button.

2

Once you clicked the button, you have two options:

Enter your email address in the pop-up window and click onSubscribe and download.
Just click onThanks, I want to just download the zip( the email address is not required ).

3

You'll be redirected to a confirmation page, while the zip file ( neve.zip) for Neve will be automatically downloaded to your computer.

📝 Note: If you are using Safari on your Mac, there is a small chance you have a setting that automatically unzips any .zip file. If that's happening for you, make sure to turn that off.

From this moment, you have toinstall the theme by following the steps presented in this doc.

📝 Note: These instructions are just for Neve. To install purchased Neve Pro, make sure you follow these instructions.

⚙️ Neve Options

Here you will find all the necessaryinformation about Neve. From the documentation, Starter Sites, useful Plugins recommendations, the Help page, Changelog, and even the transition to Neve PRO, this is the place to go.

1: Navigate to Dashboard > Appearance.
2: Click on Neve Options and start exploring the page.

📝 Note: You can check this doc to learn more about the Starter Sites Library.

🖌 Customizer Options

As all the content part of your site is customizable using page builders or the WordPress editor as mentioned above, everything else can be customized from a single place in Neve, which is the Customizer.

Navigate to Dashboard >Appearance > Customize where you will find options for:

Layout	Header	Footer	Blog/ Archive	WooCommerce
Form Fields	Menus	Widgets	Buttons	Typography
Additional CSS			Colors & Background

Layout

Neve offers multiple customizations options for the layout. There are two ways to access the layout customizations that will be applied across the site:

Appearance > Customize > Layout > Container

In this menu are available settings regarding container width (in PX), along with a reset button ( Desktop | Tablet | Mobile ), and the s tyle of other sections like the Default Container, the Blog / Archive Container, or Single Post Container, all with the options Contained / Full Width.

Appearance > Customize > Layout > Content/Sidebar

In this menu are available settings regarding thesidebar ( full width / left / right ), or the content width, along with a reset button, which can be added in percentages, and it will automatically control the width of the sidebar (if there is one). These are available for any page of the site if you choose to enable the Advanced Options.

Another thing available within the Neve theme is that you have individual posts options for the layout:

1: Navigate to Dashboard > Posts.
2: Choose one post > and click on Edit.
3: Click on the Neve icon and a new menu will slide into the page, with the options for layout.

📝 Note: The Customizer option sets the default sidebar position for various types of pages and, by editing a particular page, with the individual option the Customizer value might be overwritten.

Use the covers header layout, author box, infinite scroll post navigation on the single post layout with Nev Pro which you can get on this page.

Blog/ Archive

Neve comes with a wide palette of options for the blog and posts archive pages.

Appearance > Customize > Layout > Blog / Archive

In this menu are available settings regarding the blog layout, elements ordering, custom metadata, andthree styles for the Read More button ( Desktop | Tablet | Mobile ).

The options are organized in four areas:

Blog Layout - it has three layouts available, each of them with personalized options:
- List - shows the posts one below each other, with the possibility to have alternative images, by enabling theAlternating Layout.

Covers - places the whole content above the post featured image. We recommend using this layout when all the blog posts have a featured image set.
- Columns - sets the numberof columns in which the posts will be displayed ( from 1 to 4).

Text color - modifies the color of the text. You can choose one of theglobal colors ( theme's default colors ), by clicking on the 🌐 button.
Enable masonry- make thepostson the next row tostart whereempty space is available instead of aligning the posts on each row.

Grid - is very similar to the above one (Covers) in terms of options, just that content is below the featured image.
- Columns - sets the number of columns in which the posts will be displayed ( from 1 to 4).
- Enable masonry - make theposts on the next row to start whereempty space is available instead of aligning the posts on each row.

Ordering and content - focused on customizing how the posts listed on the blog looks like, and on which criteria are they shown, has seven options:
- Post Pagination - Number/ Infinite Scroll.
- Post Content Order - changes the order of the elements from the article, with adrag-and-drop movement.
  - Visibility- you can turn on / off the visibility of the elements, by clicking the 👁️ button.
- Excerpt Length - trims the content of the summary. If you want toundo the changes, there is a reset button at the end of the row.
- Thumbnail Shadow - adds a shadow beside the featured image.

Post Meta - are about displaying the desired items and changing their order and it has four options:
- Meta Order - allows the user to change the order of the title and details, with adrag-and-drop movement.
- Separator - gives the user the possibility to add the desired separator (a character that separates the author, date, category).
- Show Author Avatar - adds next to the author's name the avatar.
  - Avatar Size - helps to set the perfect dimension for the avatar ( in PX ), along with aresetbutton (Desktop | Tablet | Mobile).
- Use last updated date instead of the published one - allows the user to provide the last update's date.

Read more about the Blog Page

For advanced styling options on the covers and grid layouts as well as more metadata elements, you can get Neve Pro from here.

Colors & Background

Colors play an extremely significant role in website design. Using the new Global Colors option in Neve, you can easily create a beautifully unified color palette on your site.

Appearance > Customize > Colors & Background

In this menu are available settings regarding the Global Colors ( Base / Dark Mode) with the possibility to add a Custom Pallete, and the Palette Colors, with the possibility to come back, by clicking on Reset all to default (↺).

These options apply generally across the site unless more specific options are selected for some elements.

📝 Note: If some of the options don't apply on a page, make sure that page is not created using Elementor or any other page builder. If that's the case, you'll need to customize the page using the page builder.

📝 Note: For more information about Global Colors in Neve and some advice, check this documentation.

Typography

This section covers how fonts work in Neve and where to change them, the font family, font size, as well as other typography options.

Appearance > Customize > Typography

The typography options are categorized as follows:

The typography options include text-transform ( normal, camelcase, lowercase, uppercase ), font-weight, font size, line-height, and letter spacing,and also a Fallback Font, with Font Family.

Thefont family is a global setting available in the General panel.

📝 Note: Get more control on the blog and shop page with new typography options that are available in Neve Pro (upgrade here).

Buttons

To customize the appearance of the buttons you can see the Buttons panel inside Customizer.

Appearance > Customize >Buttons

The Buttons panel is formed by three sections:

General - In this menu are available settings regarding padding (in PX), along with a reset and a linkbutton ( Desktop | Tablet | Mobile ), and the Button text, which consists of typography options available for the buttons:
- Transform ( Capitalize / Uppercase / Lowercase)
- Weight ( 100 : 900 )
- Font Size and Letter Spacing (in PX), and Line Height (in PX and EM), along with a reset ( Desktop | Tablet | Mobile ).

Primary and Secondary Button - with two types of styles for the buttons: Filled andOutline.
- The filled buttons - have a background color and a text color, available also for the hover moments.
- The outline buttons - also have a background color andtext color and hover options, but the difference consists of the fact that the text color will also apply to the border. This way, you can create a button with a white background and blue-colored text and border, for example, creating the illusion of transparent background for the button.

Apart from colors, there are also border-radius controls ( with a link button, so that the value will be applied to all ) and border width ( only for the outline style ).

Some of the Primary buttons are: Add to cart, Update Cart and Proceed to Checkout, while Secondary buttons are View Cart, Post Comment, and Apply Coupon.

Form Fields

There are options in the theme for styling forms, which can be added by using dedicated plugins, such as WPForms Lite, Contact Form 7, or page builders like Elementor.

Appearance > Customize >Form Fields

📝 Note: Some of the plugins might have their own styling options that can override the theme settings.

This panel includes settings for four areas:

Form Fields - includes options for padding (in PX or EM) with a link button, spacing with a linkbutton, background color with the possibility to choose from Neve's global colors (🌐), border width,and radius (in PX or EM) with a link button and border color with the possibility to choose from Neve's global colors (🌐).

Input Text - includes options for text colorwith the possibility to choose from Neve's global colors (🌐), Transform ( none / capitalize / lowercase / uppercase ), Weight ( 100:900 ), as well asFont Size andLetter Spacing (in PX), andLine Height (in PX and EM), along with areset ( Desktop | Tablet | Mobile ).

Form Labels -includes the same options as Form Fields, except for the padding options, and works in the same way.
Button - in this area you can choose what style you want to approach for the button, whether is Primary or Secondary, with the possibility to customize the default button styles.

📝 Note: You can find more information about form fields by following this link.

Some of Neve's starter sites come with built-in one-page scroll navigation. In other words, by clicking on an item in the menu navigation you will navigate to a specific section from that current page. This is done, by using the Menu Anchor widget from Elementor ( or similar widgets ) to add specific IDs to each section. To link to a section, you would need to link to that ID, like #about for example.

📝 Note: This approach works well for a single page. If you want to make sure the navigation will work the same way on other internal pages as well, make sure you use the full link of your site, on the menu, like https://demo.themeisle.com/hestia-pro/#about for example.

Appearance > Customize > Menus

The options available here are spread into two areas:

Menus - here will appear the primary and secondary menu, with the possibility to create a new one. Each of the panels (primary / secondary) contains settings like: Menu Name, the pages attached with the possibility to reorder or to add new ones. For each page can be created anchors, by clicking on the ⬇️ button and completing the fields. From here, you can also set in which location will be displayed the menu.

Menu Locations - the user can select which menu should appear in a certain location, with a constrain: a menu can be displayed in only three locations.

There is also a button that gives the possibility to delete a menu.

📝 Note: Here is a useful doc about how to link menus to sections.

Widgets

Widgets are blocks / sections sharing various information such as the latest posts, a calendar, a contact form, and so on, and those can be shared in the dedicated areas declared in the theme.

An example of such areas is:

the blog sidebar
the shop sidebar
the footer section(usually above the copyright information)

Additional CSS

The Additional CSS panel includes a set of mini-instructions, with a few links to documentation and a field where code snippets can be added.

Appearance > Customize >Additional CSS

📝 Note: If you need help with understanding CSS, here is a doc about how to code basic CSS.

Woocommerce

The free version of Neve provides basic settings for the shop pages. These settings will be visible only if you use the Woocommerce plugin.

Appearance > Customize >Woocommerce

This panel includes options for six areas:

Store Notice - if it's enabled, it will add a text above the header.
Product Catalog - contains settings for the products page (shop page display, number of products per row, number of products per page, category display).
- for further information, check this doc.
Product Images - customizes the images by forcing a width or a thumbnail cropping.
Checkout - contains settings regarding the checkout page ( required fields, privacy policy, and terms and conditions page).
- for further information, check this doc.
Single Product - the main point here is the presence of the exclusive product, for which the user can modify the title and select the category.
- for further information, check this doc.

Advanced reviews, Multi-Announcement bars, Comparison table, and other shop-related features are available with Neve Pro -> WooCommerce Booster module that you can get on this page.

Import Demo Content	Hooks & Child themes	Translate Neve	A dedicated Blocks Template Library
Compatibility AMP	Custom fonts	Migrate from Zele (Zerif) to Neve	Page Builders
Breadcrumbs integration

Import demo content

Themes provide the user everything he needs when it comes to customizing a website and happily, in WordPress, free themes that come withDemo Content are plenty.

There are two ways to import demo content:

using Starter Sites
- just click on the Try one of our ready-to-use Starter Sites button and you will be able to see all the Starter Sites available for import.

importing an XML file
- includes also an export operation before.

Get access to all starter sites and the Templates Cloud Library to reuse your own templates on multiple websites by downloading Neve Pro on this page.

Migrate from Zelle ( Zerif ) to Neve

For switching from Zelle(Zerif) to Neve without losing your current frontpage, please follow the steps below:

1: Navigate to Dashboard > Appearance > Themes > Add Newand install the Neve theme.

2: Navigate to Dashboard > Plugins > Add New and i nstall theCloud Templates & Patterns collection plugin.

3: Navigate to Dashboard > Appearance > Starter Sites and click on Migrate Zelle.

Page Builders

If you decide on using one of our Starter Sites, after import, you will need to make some small adjustments to your site's content to make it your own.Depending on the page builder you've chosen, the process will be slightly different.

For this example, we'll go with the default page builder at this moment, which is Elementor.

To make any changes to the imported pages follow these steps:

1: Navigate to Dashboard > Plugins > Add New and install the Elementor (or any page builder) plugin.
2: Go on Pages / Posts, click on any of the pages / posts and press the Edit with Elementor blue button.

📝 Note: For further details on how to build a landing page using Elementor, check this doc.

A dedicated Blocks Template Library

Gutenberg Blocks and Template Library by Otter is one of the most popular plugins that bring in extra blocks for the new editor, and while used with Neve, it brings in a dedicated Template Library, including Neve's sections.

In order to access the library, follow these steps:

1: Navigate to Dashboard > Pages and click on any of the pages.
2: Once the page is opened, c lick on the ➕ button and start exploring the options.

📝 Note: For more details about Gutenberg Blocks check this doc.

How to use the template library

Make sure you have installed the Gutenberg Blocks plugin.

1: Navigate to Dashboard > Pages and create a new one ( or edit an old one).
2: As you hover with the mouse, click on the ➕ button to add a new element.
3: Type " Section" in the field and select the element.

At that point, you can either:

create a new custom section
click on Template Library, where you will be able to see all the available templates.
- choose the one you want, and click on it to import it.

Get advanced blocks like Comparison table, pop-ups, and Comparing Reviews with Otter + Neve Pro which is available on this page as the Block Editor Booster module.

Translate Neve

Translating Neve can be done by using any of the following plugins:

TranslatePress
- a dedicated article on how to use this plugin with Neve is available on this page.
Polylang
- a dedicated article on how to use this plugin with Neve is available on this page.

Hooks and child themes

Child themes help the user bring changes to the current theme, without the risk of losing them in case of a theme update.

You can start by downloading our starter child theme and work your way with it.

📝 Note: You can check this doc about how to create a child theme for Neve.

In order to use Neve's custom hooks, follow these steps:

1: Download and install the Neve Hooks plugin.
2: Navigate to Appearance > Customize > Hooks.

There you will find all the custom hooks and an area where you can add your custom code for each hook.

By default, Neve supports breadcrumbs on the Shop/Archive (WooCommerce) and Single Product pages.

It also supports the most popular plugins used for breadcrumbs:

Yoast SEO
Rank Math SEO
Breadcrumb NavXT
SEOPress

📝 Note: Check out the following documentation for more details about the breadcrumbs in Neve.

Looking to use custom breadcrumbs on the shop pages? Apply the filter mentioned in the Replace the WooCommerce breadcrumbs chapter.

Custom fonts

Custom fonts are useful when the user wants a different font than the one available in the theme.

There are two ways to accomplish this:

using the dedicated module available in the Orbit Fox plugin.
- check this doc to find out more information about the process.
creating achild theme.
- check this doc to find out more information about how to create a child theme.

Compatibility with AMP

Neve is an AMP-ready theme capable of lowering down your loading times for a more fluid experience. In order to use Neve at its full potential, you would need to:

1: Download and install the AMP for WordPress plugin, is capable of making full use of Neve's speed.
2: Access the wizard and follow the configuration steps.

📝 Note: Check this doc for more details about Neve's AMP support.