how to change post header title/heading on default blog posts-page - wordpress

It seems like my theme has a "feature" that changes my normal page header when i set a default post-page. Every time I set a default page for the blog-posts (readings: set page for the posts-page), the theme changes that pages title, and replaces it with “Latest News” in the centre. It appears this might be a "feature" of my theme, peakshops, but their support has gone dark.
I can't find where this is located. I can see in a code inspector this thing looks like some sort of "archive-title" class... so I'm wondering if there are some css changes i can make to change the title from "latest news" to anything else. When i click on the inspector i shows me this:
<div class="archive-title search-title">
<div class="row align-left text-left">
<div class="small-12 medium-8 large-6 columns">
<h1>
Latest News</h1>
</div>
</div>
</div>
And maybe if anyone knows how to find where that is hidden, i can then change it! I’d welcome some help please! Thanks much 🙂
The page I need help with: https://www.byjgk.com/blog/

Related

My wordpress site's pages broke

for some reason my wordpress page broke.
usually the first thing on my home and about us page was a full width image with text on top. Now The page's Title with a white < div > is being shown on top.
https://malimo.co/unsere-vision/
https://malimo.co
This weirdly happened after I created a new page and built it with visual composer.
I tried tons of things like deactivating all plugins and I even reinstalled a complete backup of all files and database from 10 days ago. The problem still persists. The theme author is unresponsive and I have no clue what to do. I put tons of work into this site that's why any help or clue as to where I could look for a problem is greatly appreciated. Thank you.
EDIT:
This is what the site is supposed to look like:
HOME https://imgur.com/a/kbsIH
UNSERE VISION http://imgur.com/a/49MnS
Notice in the code below, that the outermost div with the class "theme__section__overlay" differs in that the functional version contains the class -image, where as the non-functional one contains the class -parallax
The Unsere-vision Version
<div class="theme__section__overlay -image">
<div class="parallax__wrap parallax">
<div class="parallax__image" data-bg-src="https://malimo.co/wp-content/uploads/2016/11/Screen-Shot-2016-11-13-at-11.04.19-1741x1080.png" style="background-image: url("https://malimo.co/wp-content/uploads/2016/11/Screen-Shot-2016-11-13-at-11.04.19-1741x1080.png");">
</div>
</div>
</div>
Home page
<div class="theme__section__overlay -parallax">
<div class="parallax__wrap parallax">
<div class="parallax__image" data-bg-src="https://malimo.co/wp-content/uploads/2016/11/Screen-Shot-2016-11-13-at-11.04.19-1741x1080.png" style="background-image: url("https://malimo.co/wp-content/uploads/2016/11/Screen-Shot-2016-11-13-at-11.04.19-1741x1080.png");">
</div>
</div>
</div>
Quite likely the case that you've missed changing a setting in visual composer to fix this issue.

Drupal toggle divs in view

Currently I am working on huisartsendorpsstraat.zoetermeergezond.nl/care-practicioners to toggle the workers divs.
What I am trying to accomplish is to only show a maximum of 9 workers, after that a button displays with the show more workers text.
Getting the button ain't no problem, just added it in the footer of the view, but to make it toggle the divs it ain't just not working.
I made sure a .js file is being called from the theme.php file of the theme.
I ain't no Drupal expert, so I am sorry if I am asking stupid questions here.
Has anyone found a way to toggle the divs created inside a view?
Layout:
<div class="views-row views-row-1 views-row-odd views-row-first"></div>
<div class="views-row views-row-2 views-row-even"></div>
<div class="views-row views-row-3 views-row-odd"></div>
<div class="views-row views-row-4 views-row-even"></div>
<div class="views-row views-row-5 views-row-odd views-row-last"></div>
thanks a bunch
I would recommend using one of these modules:
https://www.drupal.org/project/views_load_more
https://www.drupal.org/project/views_show_more
They both do same thing basicly -> there are some slight differences. Personally i use the first one. It's quick and easy to set up, no additional custom JS needed. Just install, enable, change your views footer to Views Load More and configure. Good luck!

Can't figure out why CSS is causings only one of my pages to appear incorrectly in mobile?

All the pages on my responsive site look fine on my Galaxy S7 except my homepage and I can't figure out why.
Here's an example of a page that looks fine:
http://edge-trainer.com/kick-in-the-butt-jumpstart.php
Here's my homepage:
http://edge-trainer.com/
I'm using the same CSS. Looking at my source code, can anyone see what the problem might be?
Thank you in advance.
Tim
The problem in your homepage is that the content-wrappers are not inside the content container.
Within your normal page you linked the dom structure is
<div id="content-container">
<div class="content-wrapper>yourcontent</div>
</div>
whereas in your home page it is
<div id="content-container">
<div class="content-wrapper>yourcontent</div>
</div>
<div class="content-wrapper>yourcontent</div>
<div class="content-wrapper>yourcontent</div>
<div class="content-wrapper>yourcontent</div>
Judging by your CSS, all of the .content-wrappers should be inside #content-container
As a sidenote, it might be worth looking into flexbox and relative sizing for the layout you're trying out, it might make your life a bit easier, just a suggestion ;)

What would cause the responsive features on this site not work on mobile?

I am using a Bootstrap Template, that you can see the live version here - https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/
If you view it on a mobile device, you will see how the responsiveness of Bootstrap kicks in.
But when I applied it to my Rails app, the mobile version does not look the same.
Any ideas what may be causing the discrepancy?
You can see the differences especially in both the main 'content' area with the story (notice on my version you see multiple stories in the main view, but on the original you only see 1 story and you can read the content more easily). You can also see it when you press the buttons.
Press the 'blue' button to the right top of the original and you will notice that the sidepanel comes out at the top like it should. But on my version it still comes to the side and everything is small.
What am I missing?
Thanks.
Add this to your application.html.erb:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You have made too many changes while you are implementing the html in your rails view.
Like original header have following content :
<header class="header">
<hgroup class="pull-left">
<h1 class="site-title">
<a href="index.html" title="Von" rel="home">
<i class="fa fa-lemon-o"></i> Von
</a>
</h1>
</hgroup>
<div class="btn btn-primary pull-right" id="togglesidebar">
<i class="fa fa-bars"></i>
</div>
</header>
But in your view instead of <hgroup class="pull-left"> you have <hgroup class="pull-left col-xs-3 col-sm-3 col-md-3 col-lg-3"> and for <div class="btn btn-primary pull-right" id="togglesidebar"> you have <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 masthead-group-3"> also You added two more element in between these two element that destroyed your all header view.
You haven't used middle section from html design it seems you write your own. In your <header class="entry-header"> You created div instead of image tag. So every thing started distorted here. You include header footer section for each main section. But it's not big issue. Try remove div for confirmed and unconfirmed and use image instead. SO you will have proper view. Also remove row class from view that you added so view look more symmetric.
In your about section. When you try to see on mobile view. width of main container <div style="display: inline-block;" class="col-sm-3 sidebar" id="secondary"> is calculated on the basis of it's child element like <div class="about">. As your child element is form and it's having width less than the width displayed on form so remaining section not having proper background color #1c171e. So try increase width of you form control or <h4>Submit Report</h4> like <h4>Submit Report </h4> (kind of hack)under about section You will get proper view for this also.
Judging by your css file, you have loaded similar css multiple times. Consider the fact that, if everything else suggested by the people above has been corrected, the placement of the css files in the application scss file could overwrite your correct code.
I would also check the viewport meta tag as suggested above
If you try calling the CSS and JS being used as individual standalone files, instead of minified, do you still have this issue? Order of these files will matter too. I've seen lots of quirky issues when one JS gets loaded before another, same goes for CSS.
P.S. I would leave this information as a 'Comment' vs. Answer but I don't have enough stack overflow credit yet to do so ;-)
Make sure that if you have using rails g scaffold that you remove the scaffold.css file.

Tumblr photo post caption positioning

I was hoping somebody would be able to help with the following query...
I've setup a Tumblr blog on which I'm going to regularly post photo sets.
I'd like to write a brief description with each set. I can do this
within the caption field that sits below the image. The problem with
this is that when including multiple images within a post the description
will be lost at the bottom, below all the images.
I'd like the caption to be positioned at the top of the post, before
the images so that viewers can read the description first.
Here's a link to the blog, though empty for now I've inserted a test
post to show how the information is displayed. The black block
represents an image set,'Coming Soon' was entered in the caption field.
http://rg-e.tumblr.com/
Any thoughts/or guidance would be greatly appreciated.
Thanks.
Would need to see your theme's code to provide you with specifics, but you just need to move where the {block:Caption} is being rendered.
An example:
{block:Photoset}
{block:Caption}{Caption}{/block:Caption}
{Photoset-500}
{/block:Photoset}
This will put the photoset's caption above the photoset.
Just to expand upon graygimore's answer - changing the position of the {block:Caption} - Here's the exact code I modified from my custom tumblr theme. Worked a treat.
Thanks again.
{block:Photo}
<section class="caption group">
{block:Caption}
<div class="cont">{Caption}</div>
{/block:Caption}
{block:ContentSource}
<div class="cont content_source">
<a href="{SourceURL}">
{lang:Source}:
{block:SourceLogo}
<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
{/block:SourceLogo}
{block:NoSourceLogo}
{SourceTitle}
{/block:NoSourceLogo}
</a>
</div>
{/block:ContentSource}
</section>
<section class="top media" style="display:block;">
{LinkOpenTag}<img src="{PhotoURL-HighRes}"> {LinkCloseTag}{Question}
</section>
{/block:Photo}

Resources