back to Themify.me

Default CSS Classes

This article lists all the default modules and its CSS classes used in the Flow Framework. You can write CSS targeting these classes in Custom CSS panel or child theme style.css. This is intended for developers with CSS knowledge. If you are not familiar with coding CSS, use the Styling Panel instead.

Generic Classes

Below are the generic classes that output from the framework:

  • All modules have: ‘tf_module_wrapper tf_module_module-name’ (eg. Site Logo module would have ‘tf_module_wrapper tf_module_site-logo’)
  • All rows have: ‘tf_row’
  • All templates have: ‘tf_template tf_template_themeName-templateName’ in <body> class (eg. Base theme’s Index template would have ”tf_template tf_template_base-index’)
  • All template parts have: ‘tf_template_part_wrapper themeName-templatePartName’ (eg. Base theme’s Header would have ‘tf_template_part_wrapper base-header’)
  • Custom CSS Class can be added in Row, Module, Template, and Template Part options lightbox.

Archive Post

This module is used to build the post layout in archive view.

  • Posts Wrapper = .tf_loops_wrapper
  • Post Container = .tf_post
  • Post Link = .tf_post a
  • Post Link Hover = .tf_post a:hover
  • Post Title = .tf_post_title
  • Post Title Link = .tf_post_title a
  • Post Title Link Hover = .tf_post_title a:hover
  • Post Content = .tf_post_content
  • Post Meta Container = .tf_post_meta
  • Post Meta Link = .tf_post_meta a
  • Post Meta Link Hover = .tf_post_meta a:hover
  • Post Meta – Date = .tf_post_date
  • Post Meta – Category Link = .tf_post_category
  • Post Meta – Tag Links = .tf_post_tag
  • Post Meta – Author Name = .tf_post_author
  • Post Meta – Comment Count = .tf_post_comment
  • Pagination Container = .tf_pagination
  • Pagination Link = .tf_pagination a
  • Pagination Link Hover = .tf_pagination a:hover

Author Box

This module is used to display the author info in single post and page.

  • Author Box Container = .tf_author_box
  • Author Avatar = .tf_author_avatar
  • Author Name = .tf_author_name
  • Author Bio = .tf_author_bio

Category Description

This module is used to display the category description in category pages.

  • Category Description = .tf_category_description

Category Title

This module is used to display the category title in category pages.

  • Category Title = .tf_category_title

Comments

This module is used to display the comments and comment reply form in single post and page.

  • Comments Container = .tf_module_comments
  • Comments Link = .tf_module_comments a
  • Comments Link Hover = .tf_module_comments a:hover
  • Comment Title = .comments-title, .comment-reply-title
  • Comment Time = .comment-time
  • Comment Author = .comment-author
  • Comment Content = .comment-content
  • Comment Reply Link = .comment-link .comment-reply-link
  • Reply Form = #commentform
  • Reply Form Input = #commentform input [type=text]
  • Reply Form Textarea = #commentform textarea
  • Reply Form Button = #commentform input#submit

Divider

This module is used to display a horizontal divider.

  • Divider = .tf_divider

Icon

This module is used to display links with icons such as social links.

  • Icon Container = .tf_icons
  • Icon Link = .tf_icon_link
  • Icon Link Hover = .tf_icon_link:hover
  • Icon Label = .tf_icon_label

Image

This module is used to display image along with title and caption.

  • Image Container = .tf_image_wrapper
  • Image = .tf_image_wrap img
  • Image Title = .tf_image_title
  • Image Title Link = .tf_image_title_link a
  • Image Title Link Hover = .tf_image_title_link a:hover
  • Image Caption = .tf_image_caption

This module is used to display menu navigation that are created in WP > Appearance > Menus.

  • Menu Container = .tf_menu
  • Menu Link = .tf_menu a
  • Menu Link Hover = .tf_menu a:hover
  • Current Link = .tf_menu .current_page_item a, .tf_menu .current-menu-item a
  • Active Link Hover = .tf_menu .current_page_item a:hover, .tf_menu .current-menu-item a:hover
  • Dropdown Container = .tf_menu ul
  • Dropdown Link = .tf_menu ul a, .tf_menu .current_page_item ul a, .tf_menu ul .current_page_item a, .tf_menu .current-menu-item ul a, .tf_menu ul .current-menu-item a
  • Dropdown Link Hover = .tf_menu ul a:hover, .tf_menu .current_page_item ul a:hover, .tf_menu ul .current_page_item a:hover, .tf_menu .current-menu-item ul a:hover, .tf_menu ul .current-menu-item a:hover

Next/Prev Post

This module is used to display the next / previous post link in single post view.

  • Next/Prev Container = .tf_post_nav
  • Next/Prev Link = .tf_post_nav a
  • Next/Prev Link Hover = .tf_post_nav a:hover
  • Next/Prev Arrow = .tf_post_nav .prev .arrow:before, .tf_post_nav .next .arrow:before
  • Next/Prev Post Label = .tf_post_nav .next_prev_post_label

Page Content

This module is used to display page content.

  • Page Content Container = .tf_page_contnet

Page Tiltle

This module is used to display page title.

  • Page Title = .tf_page_title

Search Form

This module is used to display the WordPress built-in search form.

  • Search Container = .tf_searchform
  • Search Input = .tf_searchform input[type=text]

Single Post

This module is used to build the post layout in single post view.

  • Post Container = .tf_post
  • Post Link = .tf_post a
  • Post Title = .tf_post_title
  • Post Title Link = .tf_post_title a
  • Post Title Link Hover = .tf_post_title a:hover
  • Post Link = .tf_post a
  • Post Link Hover = .tf_post a:hover
  • Post Content = .tf_post_content
  • Post Meta Container = .tf_post_meta
  • Post Meta Link = .tf_post_meta a
  • Post Meta Link Hover = .tf_post_meta a:hover
  • Post Meta – Category Link = .tf_post_category
  • Post Meta – Tag Links = .tf_post_tag
  • Post Meta – Author Name = .tf_post_author
  • Post Meta – Comment Count = .tf_post_commnet

This module is used to display the site logo text or logo image.

  • Site Logo Container = .tf_site_logo
  • Site Logo Text = .tf_site_logo a

Site Tagline

This module is used to display the site tagline that is entered in WP > Settings > General. You may enter custom tagline text in this module.

  • Site Tagline = .tf_site_tagline

Text

This module is used to display text entered with the visual editor. Shortcodes are supported in Text module.

  • Text Container = .tf_module_text
  • Paragraphs = .tf_module_text p
  • Link = .tf_module_text a
  • H1 = .tf_module_text h1
  • H2 = .tf_module_text h2
  • H3 = .tf_module_text h3
  • H4 = .tf_module_text h4
  • H5 = .tf_module_text h5
  • H6 = .tf_module_text h6

Video

This module is used to display video embeds such as YouTube, Vimeo, etc.

  • Video Container = .tf_video_wrapper
  • Video Embed Container = .tf_video_wrap
  • Video Title = .tf_video_title
  • Video Title Link = .tf_video_title_link a
  • Video Title Link Hover = .tf_video_title_link a:hover
  • Video Caption = .tf_video_caption

Widget

This module is used to display any widget (built-in WordPress widgets and custom widgets that are registered by custom functions or plugins).

  • Widget Container = .tf_widget
  • Widget Title = .tf_widget_title
  • Widget Link = .tf_widget a
  • Widget Link Hover = .tf_widget a:hover

Widget Area

This module is used to display widget area (eg. Sidebar). You would drop in the widgets in WP > Appearance > Widgets.

  • Widget Area Container = .tf_widget_area
  • Widget Container = .tf_widget
  • Widget Title = .tf_widget_title
  • Widget Link = .tf_widget a
  • Widget Link Hover = .tf_widget a:hover