I am using LayerSlider - The Parallax Effect Slider in my website dtraffic.biz but I am having problems with it. I have had to delete many lines of page.css so that the logo keeps in its place and now everything seems ok but I would like to reduce the space that is left between de LayerSlider and the next section (the one that says: member and advertisers).
Any suggestion?
Note:
My website is designed in php, it has a two files distributing the desing on the homepage, layout_header.php and layout_footer.php
Add the following in your css
.dim { margin-bottom: -40px; }
This will adjust the space below the dim div which is containing the slider.
Try giving a -ve (negative) margin-top to <div class="bc-w2"> in your CSS
Related
I have a white box covering my content when viewing the website on a mobile phone not including tablets. It occurs once at the top under the first image slider, then again towards the bottom of the page... covering up a photo.
The website url is designandcrate.com
I have tried removing tags and adding tags so that the content will show up.
[span6]
[service_box title="Professional Staging with a Fresh Approach!!" subtitle=" With over 25 years of interior design experience in the residential and commercial world I am ready to focus on the area of staging! I recently renovated and staged a house in FL and loved the process and used new and older pieces to give a more realistic and fresh approach to the sometimes stagnant world of staging as a result!" icon="no" text="click "More" btn_text="See More" btn_link="#" btn_size="normal" target="_blank" custom_class="extra"]
[/span6]
I expected to see the content on my website, but can not see the content because of a white box covering the content.
ALSO a new discovery is that the issue could be a media query issue. Below is a photo of a string of code that could be related to what I am referring to.
image of code relating to media query
Screenshot of mobile view
Mobile view
mobileview
p.s. Sorry if I was not supposed to put a URL I am new to the forum...
UPDATE I have found a temporary fix to show content... but it does not get rid of the box itself that is causing a big space with nothing in it...
Here is the link to a video of how I did this.
https://imgur.com/r9dCzDz
Try adding in your themes' custom CSS area the following:
.header:before {
background: none !important;
}
Problem solved -- Thank you for the help.
.header .header_block {
border-radius:2px
}
.camera_wrap {
padding-top:30px;
margin-bottom:-80px;
}
body.home .header:before {
height:auto;
}
.clearfix {
padding:10px;
}
As you can see here: https://wildlatina.com/my-account/
the white body is not inside the page and there is not margin padding for the login form? what did I do to mess this up? I'm a beginner when it comes to editing with css so please go easy on me. Just would like the account page to look nice.
hi please login to your cpanel or ftp then open your theme style.css
find the css rule below
.full-width-content .container.grid-container {
max-width: 100%;
}
and comment the rule like this
.full-width-content .container.grid-container {
/*max-width: 100%;*/
}
and it will look like this
You have used the Wordpress theme GeneratePress. In that theme, if you have the class container and grid-container on an element, the width of that element is reset from 1080px to auto - which, in your case, means it fills the width of the page. So, your DIV with id "page" is changed from 1080px to the width of the page.
You should remove the container class from this DIV. You may then have to add some styles back to get the final effect you desire.
Hello You Can Style It By Using Some Plug-ins Which present at plug-ins>new one
for example you can go with this plug-in
https://wordpress.org/plugins/woocommerce-login-and-registration/
If You Cant Style It Please Post The Error You Are Getting Neatly And Most Probably You Can Use Wordpress Login For Woo-commerce But If You Are Really Interested To Use Only That You Can Customize It From CSS Or You Can Use Plug-ins Which Do The Same But No Coding Knowledge Required To Do It From Plug-in Because Everything is Graphically Done And whatever The Coding Part Is That Will Be Take Cared By Plug-in Itself So Maximum Use Plugins So It Could Better In Development
1) you can add this css add into theme or child theme style.css
.hfeed.site.grid-container.container.grid-parent{
width: 80%;
}
2) you can remove container class Here:
<div id="page" class="hfeed site grid-container container grid-parent">
my suggestion is second option is right
I have a problem with layout of articles page. The problem is that there is too much space after Tilte H1 "Written by" - element and article itself. You can see it here:
http://watersite.loomhost.com/index.php/en/news-eng/40-computer-programmer-cracks
I have managed to get the space between those elements on "blog" page (http://watersite.loomhost.com/index.php/en/news-eng) by adding this code to template.css in my template folder:
.blog .items-leading h2 {
color:#04599a;
font-size:180%;
margin-bottom:-15px;
}
but I dont think -15px is correct and there is also some better coded solution for this?
So Im searching for better solution of "margin-bottom" and getting less space between elements on article page.
Thank you!
Line 9 of bootstrap.min.css reads line-height:40px for h2. Plus there is the .page-header element, you might want to look into this, too... just try the "inspect element" tool of Firefox and play around a little ;-)
You might want to use pull-right on the div around the toggle. Also you have a couple of empty divs above the image.
I'd like to be able to show or hide content in a sidebar based on the height of the adjoining content div, but i'm not exactly sure if/how it can be done.
For example, on the blog page of my current project (http://djryanmcnally.pixelworx.it/?page_id=18) I have two widgets in the sidebar (one for latest tweets, and one for latest music news) however, as you can see on this page, the content of the blog posts (all test posts...) are much longer than the height of the two widgets, and would of course, get larger as more posts are added. This leaves a certain amount of blank space below the last widget in the sidebar, which I would like to fill based on the height of the adjoining #content div.
Suppose, for example, I also wanted to put into the sidebar some other content divs, such as #latest-pics, #latest-mixes and #latest-events but only if the adjoining content was large enough to create space for them, how would I do that?
I thought about using inline styling with variables, such as: (Pseudocode)
$i = #content(height);
if $i > 500px { $display1 = 'inline' }
else { $display1 = 'none' }
elseif $i > 1000px { $display2 = 'inline' }
else { $display2 = 'none' }
elseif $i > 1500px { $display3 = 'inline' }
else { $display3 = 'none' }
.......
endif;
and using <div id="latest-pics" style="display:<?php $display1 ?>;"> etc...
But, I highly doubt that would be anywhere even close to doing what i want, but, y'know, thought process, etc! lol!
I could of course use a floating sidebar that moves down as the use scrolls, but it'd be a nice touch to be able to do this somehow!
Any thoughts?
p.s - excuse the sketchy code example, i'm typing in a rush as I have to go to work!
Thanks in advance! :D
This was mind bugling for me too ;) That's why I created a simple java script plugin that removes last widget or widgets from sidebar until sidebar height is equal as a content height.
This way you can add as much widgets as you want, and they will be removed if content is not high enough.
It works by default with Twenty Thirteen theme but you can use plugin settings to adopt it to any theme. It's called sidebarAutomizer and can be found at wp repository - http://wordpress.org/plugins/sidebarautomizer/
Definitely looks like a javascript kinda thing. You want a vertically responsive layout, which is close to impossible to do with pure php. The webserver loads the php code first then runs the javascript; meaning you can't reference javascript variables with your php.
Looks like your theme already has jquery installed so you might as well work with that.
In my opinion, I'd have all the divs on the side bar there but make sure they are all hidden (style="display:none"). Once the page has loaded and the content div is on the document, you can grab the height of the main content div on the left with
var h = $('#main').height();
Now the tricky part is knowing how the content in each of your sidebar widgets is going to be populated. You might want to put some limits on that to make things easier, or else you're going to require alot more post processing.
Once you know how you are going to handle the heights of you individual widgets, and what tier schema you want them to show in, you can show them as simply as
$('#widgetId').show();
Where '#widgetId' is going to be the id="" attribute on your div that you originally set to display: none.
So it would end up being something like
if(h > 100) $('#widget1').show();
if(h > 300) $('#widget2').show();
...
ect
If some of the widgets are too tall (say the widget2 is 500px usually) then you can set the height of the widget with javascript and handle the overflow however you'd like. You can use a overflow-y:scroll but that'd look pretty ugly, maybe just overflow:hidden, and make sure the height is at a consistently asthetic place for the widget.
I was going to do some commenting for suggestion; however, after some thoughts, I decided to go for answer area.
I think it is totally achievable. (Pseudocode)
set up sidebar area with fixed sidebar items with divs and define empty sidebar divs for other hidden content.
(empty divs for hidden content: ...)
Loop start: get total scrolled_height by jQuery ($(window).scrollTop() + $(window).height()).
get used_space_height including header and sidebar height
calculate the available_height by (scrolled_height - used_space_height)
see if next sidebar div height can fit into avaiable_height or not:
4.1. if yes, load next sidebar div => go to step 5.
4.2. if not. => go to step 6. end
load next sidebar div with ajax call to return content => go back to step 1.
Loop End.
Execute the above steps in javascript/jQuery by detecting that user stops scrolling.
Hope this helps.
On my Drupal site, I have made a Users page using the Views module, which is simply a nicely styled grid (HTML table) of users. I'm displaying a few fields for each one, and both the name and the profile picture have been set to link to the user node.
What is the best way to change it so that the whole cell (HTML td) links to the user node? EDIT: I'm not concerned with adding the HTML link tags, but with accessing each profile page's URL.
I've looked into modifying the theme of the view (over-riding the Style output e.g. views-view-grid--users.tpl.php), but cant see an elegant way to get the URL of the user node.
EDIT: I've implemented a temporary solution in javascript which looks into the HTML of each cell, extracts the first link's URL, and uses that, but is there not a better way of doing this using the Drupal variables somehow?
Thanks for your help.
How about something like this...no JavaScript needed
In your table:
<td>the link</td>
...
In your CSS file:
.td_link {
display: block;
width: 100%;
}
So basically all you need to do is add a class to your link, and a small snippet of CSS.
OK I found a better (super simple) way of extracting the profile URL, and also I over-came a few issues with the whole block-link solution (attributed to espais), which I thought were worth documenting. So here is the complete solution to my original problem:
1) Add a custom template file to override views-view-fields.tpl.php (see http://views-help.doc.logrus.com/help/views/using-theme - thanks to barraponto for the useful link). In this custom file, you should wrap all the code in a link, and add a clear-fix div just before the end to stretch the link to the full height of the container.
<a class="td-link" href="user/<?php print $row->uid; ?>">
...
<div class="clear-fix"></div>
</a>
2) Now you need to get rid of any other links from inside each grid element, as you are not allowed to nest HTML links (produces really weird behaviour). First thing to do is edit the View, and make sure none of the fields have "link this field to it's user" checked. Then if you want to include the profile picture field, you need to add a small fix module because by default there's no way to stop this field being a link! You can get the module from this comment: http://drupal.org/node/720772#comment-2757536
3) Finally the CSS. Add the following to your theme's style.css:
a.td-link {
display: block;
color: #000;
text-decoration: none;
border: 1px solid #E9EFF3;
}
a.td-link:HOVER {border-color: #85b3d4;}
a.td-link label {cursor: pointer;}
div.clear-fix {clear: both;}
This removes the link formatting from the text (as we want the whole block to look like a link, not just the text), and stretches the link out to fill the container. It also makes the cursor graphic consistent, and adds a nice border effect when you mouse-over the block. Remember you can also add a custom CSS class to your View, which makes it much easier/neater to select elements for styling in your CSS code.
It's important to distinguish between actual links, with <a> tags, and arbitrary elements you can click. Even if you don't care about semantics, you should care about your visitors not running JavaScript, especially search engines.
Rather than turning a block element into a link, you should turn a link into a block element, as espais suggested. One way to get more control over the markup is using custom fields to add opening and closing tags for your link around the rest of your fields.
spais and scott-reynen are right. but instead of placing every field under multiple <a> elements, each styled with css to turn them into blocks (which can have margin and padding), why not use a single <a> element?
if everything is meant to link to the same place, you can place it all together under a single <a> element, although every element should be an inline element (<span> instead of <div>). you can do it by changing the row template: check http://views-help.doc.logrus.com/help/views/using-theme
in your case, copy templates from inside the views module to your theme folder, and rename it accordingly as your view "Theme: Information" says. make sure there is no <div> or <p> or any other block element being output. if you need to break lines, use <br>.