My customer wants to maintain their own grid so that they can fully design their design like they want. Problem in this is when i add a Bootstrap grid in concrete5 that it defaults created a col-md-6 for example.
Problem is that i have a design with 2 options, mobile or desktop. In my setup on default i have it like this:
<div class="row">
<div class="col-sm-6">A</div>
<div class="col-sm-6"><img></div>
</div>
<div class="row">
<div class="col-sm-6"><img></div>
<div class="col-sm-6">B</div>
</div>
The problem over here is that this should be the layout for the "desktop" version instead so i'd need to use the col-lg instead. Fo all smaller devices (col-md and below) the rows should be fullscreen so it should look like:
A
B
How can i achieve that in concrete5? The other problem i have is that if i make this responsive the design would show it in this order for mobile:
Text
Photo
Photo
Text
Where the customer wants it like where the col-push would come in.
How can i do that if even possible with Concrete5? I ofcourse can set it all manually and make the inside block as content but by doing that it is not flexible at all.
Thanks
This should be possible with the theme area layout presets (which are defined in the page_theme.php).
The downside is you'll have to define all possibilities.
Example:
public function getThemeAreaLayoutPresets(){
$presets = array(
array(
'handle' => '2_columns_no_push',
'name' => '2 Columns no push',
'container' => '<div class="row"></div>',
'columns' => array(
'<div class="col-lg-6 col-md-12"></div>',
'<div class="col-lg-6 col-md-12"></div>'
)
)
);
return $presets;
}
Developers documentation : http://documentation.concrete5.org/developers/designing-for-concrete5/adding-complex-custom-layout-presets-in-your-theme
Related
I'm using SilverStripe 3.5.3 I want to customize content ($Content) of the Security/login page. How do I do it?
You can also modify the page template by putting a template file named Security_login.ss in your templates/Layout directory.
The contents of one i've used in a previous project is:
<div class="row security-spacer">
<div class="large-12 columns">
<h1>$Title</h1>
<div class="typography">$Content</div>
<div class="row">
<div class="large-6 columns">
$Form
</div>
</div>
</div>
</div>
You can also create templates for
Security_changepassword.ss
Security_lostpassword.ss
Security_passwordsent.ss
You could extend the LoginForm class and create your own LoginForm anyway you like. You could base it off of the MemberLoginForm.php class.
Check out this article here which may help.
I know the OP asked specifically for its theme, but in case someone wants to know how to do it on the code side of things, you can use the request object to determine that, like this:
/mysite/code/Page.php
public function anyMethod() {
$value = 'default';
if (Controller::curr()->getRequest()->getURL() === 'Security/login') {
$value = 'something else';
}
return $value;
}
(On SilverStripe 4.1.0, anyway)
<div class="row">
<div class="large-12 columns">
<div class="row collapse featured-option">
<input id="featured" name="featured" type="checkbox" style="display: none;" <?php echo esc_attr( $featured_disabled ); ?>>
<span class="custom checkbox <?php echo esc_attr( $featured_disabled ); ?>"></span> <?php echo sprintf( __( 'Feature Proposal %s', APP_TD ), sprintf( _n( '(1 credit)', '(%d credits)', hrb_required_credits_to('feature_proposal'), APP_TD ), hrb_required_credits_to('feature_proposal') ) ); ?>
</div>
</div>
</div>
I'm trying to edit this wordpress theme code to use it for my own website.
But I don't know why style="display: none;" is needed here.
When I erase this style element, I get checkbox on the screen
but the functions are not working as it should be.
What's wrong with this? Why need "display: none"?
Please help
In this instance it is simply just hiding the checkbox. When
style = "display:none;"
is used, the page will be displayed as if the item does not exist. Meaning the layout of the page will not show a "hole" or something where that item is missing. In other words, the layout will not be affected by this.
The other way to hide something would be with,
style = "visibility:hidden;"
However, the page layout will be affected and the hidden item will still take up the same space.
Depending on what was trying to be accomplished, the checkbox could be hidden for different reasons. It's possible that the programmer of this code wanted to hide this checkbox by default and then show it later on after certain events occurred. Additionally, there are times when it is best to show and hide objects as you need them or don't need them rather than constantly recreating or deleting them.
I am trying to use owl-carousel with Telescope but i am not able to make it to work. I have no dynamic data at this point. Below are the steps I followed.
Create a Telescope package.
Added Theme Zeiss.
Add the owl-carousel package
Then on the user Profile, where the telescope app shows the list of Posts the user has liked in a tabular format, i want to display it as a carousel with the images. (Please note this is the end goal, for now i am just trying to get the basic owl-carousel functionality work)
Below are the steps i took.
On the User_profile template i added a new template carousel
<template name="carousel">
<div class="user-profile-votes grid grid-module">
<div id="owl-carousel">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
<div class="item"><h1>8</h1></div>
<div class="item"><h1>9</h1></div>
<div class="item"><h1>10</h1></div>
<div class="item"><h1>11</h1></div>
<div class="item"><h1>12</h1></div>
<div class="item"><h1>13</h1></div>
<div class="item"><h1>14</h1></div>
<div class="item"><h1>15</h1></div>
<div class="item"><h1>16</h1></div>
</div>
</div>
<div class="customNavigation">
<a class="btn prev">Previous</a>
<a class="btn next">Next</a>
</div>
</template>
After that is done, i added the js file supporting the template as below.
Template.carousel.rendered = function() {
Meteor.setTimeout(function() {
var owl = $('#owl-carousel');
owl.owlCarousel({
navigation : true,
loop: true,
autoplay: 1000,
items : 10, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0
itemsMobile : false, // itemsMobile disabled - inherit from itemsTablet option
mouseDrag: true,
touchDrag: true,
afterInit : function(elem){
var that = this
that.owlControls.prependTo(elem)
}
});
}, 0)
}
With this the carousel works, shows me 10 different elements, as you can see in the below video. Even the Autoplay works, the however the buttons or dots don't. I tried zillions of things and referred many articles changed timeout, added autorun, etc. However, this is a static list.
Not sure why it's not working, any help will be great.
https://youtu.be/Ljoxw561Eic
This owl-carousel package is using Owl Carousel 2
The link in the atmospherejs.com is wrong , that is old version. The Options & Events are different from this version.
I have just begun exploring CSS and am looking forward to gain an in-depth understanding of the language.
One of the issues I'm facing with a project is the alignment of the products in mobile view.
Website - http://klcl.com.my/product-listing/
In the mobile view, the products are touching the right side of the screen. I want them to be centered. I tried adding a 'margin-right: 15px' and it works; however, that new line of code affects the social media icon in the footer as well. I'm guessing because both the product list and the icon are using the '.col-md-4' class tag.
Here is the code:
<div class="col-md-9 product-listing-main">
<div class="row">
<?php
$args = array(
'posts_per_page' => -1,
'post_type' => 'product'
);
$query = new WP_Query($args);
while ($query->have_posts()) :
$query->the_post();
?>
<div class="col-md-4">
<figure>
<img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID));?>" />
<figcation><?php the_title(); ?></figcation>
</figure>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
</div>
</div>
How can I align the products to the middle without affecting any other elements on the website? Any help will be greatly appreciated.
After a short look at your code i see that you are often manipulating the paddings of bootstrap elements (container, col-* …) and that leads to confusion. Try to avoid this and everything runs fine.
add this to your css to reset the previous settings:
.on-social{margin-right:initial !important;}
or
.on-social{margin-right:0px !important;}
please consider margin: 0 auto; for centering the elements.
I'm developing an application that has at least 30+ input fields. I would like to use form-horizontal and have my labels to the left of my input fields. I run into an issue when I have multiple label/textboxes on the same line. For example, I'm trying to fit City (and its textbox), State (and its dropdown), and Zip Code (and its textbox). It looks fine on a widescreen, but labels begin to overlap other inputs when the screen is reduced to non-widescreen (and worse when at tablet screen size).
How can I avoid this? Should each label/input combination be its own span4 within the same row-fluid? Should I be trying to fit all within a single div of span12?
I've tried to find examples, but every one that I've found doesn't use form-horizontal and isn't very complex. I'm using Bootstrap 2.3.2.
Code:
<div class="row-fluid">
<div class="span4">
#Html.LabelFor(m => m.PrimaryCompanyAddress.City, new {#class = "control-label", #for = "PrimaryCompanyAddress_City"})
<div class="controls">
#Html.TextBoxFor(m => m.PrimaryCompanyAddress.City)
</div>
</div>
<div class="span4">
#Html.LabelFor(m => m.PrimaryCompanyAddress.State, new {#class = "control-label"})
<div class="controls">
#Html.StateDropDownListFor(m => m.PrimaryCompanyAddress.State, new {#class = "input-medium"})
</div>
</div>
<div class="span4">
#Html.LabelFor(m => m.PrimaryCompanyAddress.Zip, new {#class = "control-label"})
<div class="controls">
#Html.TextBoxFor(m => m.PrimaryCompanyAddress.Zip, new {#class = "input-mini"})
</div>
</div>
</div>
Your main problem is Bootstrap 2. It was not built to be responsive, while Bootstrap 3 was. If you can upgrade (which admittedly is non-trivial), then that would be your best bet. Short of that, you'll need to handle it manually with breakpoints. For example, let's say your form looks fine until the screen width falls below 1024 pixels, then you would add something akin to the following to your stylesheet:
#media (max-width: 1024px) {
.input-medium {
max-width: (whatever)px;
}
/* continue tweaking each element until everything fits and looks right */
}
Then, you would continue to scale down your screen width until it breaks again, and then add another breakpoint along the same lines.