-
-
Hello, i’m looking to add “Boxes” like this feature (typography boxes)
https://preview.themeforest.net/item/specular-responsive-multipurpose-business-theme/full_screen_preview/9412083?_ga=2.58433514.133506167.1562573748-2115435124.1562327590But i can’t find the element to do this. Would you help me?
Thanks
- This topic was modified 4 years, 10 months ago by maxime.
-
Hello,
Do you mean to add this Chrome style browser window box design? If you are talking about that, you can create this style using Portfolio and select the “chrome style” on Portfolio Element or page
Let me know
Thanks
-
-
Ah, sorry, you can add this boxes using shortcodes, let me send to you the source code for this page:
[vc_row][vc_column width="1/2" enable_animation="true" animation="bounceInUp" background_color_opacity="1"][vc_column_text][alert title="Default Box" style="default"]There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there.[/alert][/vc_column_text][/vc_column][vc_column width="1/2" enable_animation="true" animation="bounceIn" delay="200" background_color_opacity="1"][vc_column_text][alert title="Error Box" style="error"]There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there.[/alert][/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/2" enable_animation="true" animation="bounceInUp" delay="400" background_color_opacity="1"][vc_column_text][alert title="Success Box" style="success"]There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there.[/alert][/vc_column_text][/vc_column][vc_column width="1/2" enable_animation="true" animation="bounceInUp" delay="600" background_color_opacity="1"][vc_column_text][alert title="Grey Box" style="grey"]There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there.[/alert][/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/2" enable_animation="true" animation="bounceInUp" delay="800" background_color_opacity="1"][vc_column_text][alert title="Warning" style="warning"]There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there.[/alert][/vc_column_text][/vc_column][vc_column width="1/2" enable_animation="true" animation="bounceInUp" delay="1000" background_color_opacity="1"][vc_column_text][alert title="Information Box" style="info"]There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there.[/alert] [/vc_column_text][/vc_column][/vc_row]
Thanks
-
Nice ! Thank you, it works.
But one last thing about it, how can i edit the block color, and text color?
Thanks
-
They are automatically generated from alert style type, for example the red one is for Error style
if you need custom colors, add them with custom css code.
Let me know if you need my help with css
Thanks
-
-
cool, and if i want to align verticaly, do i have to add this :
vertical-align: middle; ?
-
Did you added this:
.alert .alert_content{ padding-bottom:16px; }
??Please add this code
.alert .alert_content{ padding-top:8px; padding-bottom:8px; }
to vertically middle align -
-
You’re welcome!
If you like our theme and support please give us a 5-star rating on Themeforest, it’s important for us :)
Thank You
-
You must be logged in to reply to this topic.