Hi,
I have installed Black Studio TinyMCE Widget as you recommend. I also have TinyMCE Advanced installed.
When I’m in Visual editor and click on Add media I have no option for defining image alignment with the text. I’ve seen a couple of tutorial and they show a window with alignment option when adding media (e.g. http://youtu.be/FxxFt3a0T5w).
Do I miss some plugin? How can I fix it?
alignment of media in page or post
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Actually I found out you can do it by clicking on the image when inserted!
Is there a way to do it for embedded video too?
Hi phil_traveler
You can try aligning videos manually by clicking over to the Text tab in the widget and wrapping the video code as follows:
You can change the center value to left or right too.
Hi Andrew,
I did what you wrote but the embedded video now fits screen width. Maybe there’s a misunderstanding I want it to be aligned with the text paragraph.
Phil
Videos in Vantage will usually be full width due to FitVids running in the background. FitVids ensure that your video sizing responds dynamically to different devices. The downside is they are pushed full width. So that might be one challenge.
In terms of aligning with text, can I see the page we’re working with?
This is a private message.
This is a private message.
I tried two different solution, you see them on the same page
1. Using Page builder, I set two column in the row and embed the video in the second one. Problem the video box is too high showing black space on top and bottom
2. In a single-column row I embedded the video using Advanced Responsive Video Embedder plugin. I can adjust the video maxwidth but can’t figure out how to align with text since code is just
Could you perhaps just insert a column on the left for the video and a column on the right for the text?
Or try this:
I fixed the black bars, but the video is not vertically aligned with text. How can I do it?
The other code doesn’t show any changes.
Hi Phil_traveler
Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:
[email protected]
Just navigate to Users > Add New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the “Send Password” field so we receive the details.
Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.
This is a private message.
This is a private message.
This is a private message.
http://thebutterflyhunter.net/starthere/
Building the layout with Page Builder is the only easy way I can see to handle this.
Using the Text widget instead of the Visual Editor widget stops a paragraph being inserted above the video. That was causing the little bit of space.
For centering I just edited the row in question, click Attributes and inserted into CSS Styles:
Awesome! Great!
Last question: How to reduce the distance between widgets? I want the headline “Why Inspiration is so important” to be closer to the box below, and the same for the other sections below.
Also within a visual editor is it possible to reduce the distance between paragraphs?
Glad to hear we’re making progress :)
1. In this row: Why Inspiration is so important. Edit the row by clicking the wrench icon far right > Edit Row > Theme tab > No Bottom Margin. Try that.
2. Assuming you only want to change paragraph spacing in some widgets you’d need to try this:
a. Edit the widget.
b. Click Attributes top right.
c. Insert the following as a Widget Class:
d. Insert the following at Appearance > Custom CSS:
/* Custom Page Builder */ .entry-content .custom-paragraph p { margin: 1em 0; }Adjust 1em as required em can be changed to px. The value represents top and bottom. Can be changed to four values which would then represent top right bottom left:
margin: 1em 0 1em 0;
I tried to make the change in some rows as you wrote. And it worked. But for the Why inspiration raw there still was some margin. So I changed the text from header to paragraph and changed font size to look like before. and it worked.
Then I wanted to change paragraph margin in the widget “Hi I’m Phil… where to go…”, I inserted the widget class and the custom css, but nothing changes. Do I have to insert something in Widget Styles>Attributes> CSS Styles ?
We’re not using CSS Styles because we’re targeting our class from Appearance > Custom CSS. Can you confirm that the following has been inserted at Appearance > Custom CSS?
/* Custom Page Builder */ .entry-content .custom-paragraph p { margin: 1em 0; }I can’t see it there.
Side note, the following in your Custom CSS, these are really broad selectors, it might cause problems targeting them like this. I’d consider removing them.
div { text-align:center; } ul { display:inline-block; }yes I confirm it is in Custom CSS
/* Custom Page Builder */ .entry-content .custom-paragraph p { margin: 1em 0; }the reason I added
div { text-align:center; } ul { display:inline-block; }is because in the home page I have a metaslider Image I don’t want to stretch (there is a text inside). Is there maybe another way to prevent it?
I understand this thread is becoming too long, I promise this i my last question.
I’ll look into the first issue now.
div and ul lack specificity, all of your content is in a div at some point and lists are used regularly. If you just need to stop Meta Slider stretching you can do that from Appearance > Theme Settings > Home > Home Slider Stretch. Disable that setting.
I moved your Custom CSS from Simple Custom CSS to SiteOrigin Custom CSS. The new rule is now reflecting. Consider de-activating Simple Custom CSS and just using SiteOrigin Custom CSS.
You can now go to Appearance > Custom CSS and adjust the paragraph margin rule.
For it to work you’ll need to remove the CSS Styles you inserted and just use the CSS Class.
So just use Row Class don’t use CSS Styles in this case.
ok, perfect I did what you say.
Thank you so much Andrew for your help. Site origin support is really top class!
I’ll tell all my friends.
Phil
Awesome :) Glad to hear that helped.
Thanks for your support.
Hi Andreaw,
sorry to come back on this tread. I just updated the last version of Vantage Premium.
The row ( “Inspiration:” and bullet points) I modified according to your indication
is not showing properly now. How to fix it?
http://thebutterflyhunter.net/starthere/
Thanks
No problem.
Can you please, check, when you de-activate Easy Google Fonts, is there any change?
It’s a mess! After I deactivate it everything from that section on is no more visible!
The problem as I see it right now is that the text underneath the heading: Why Inspiration is so important is rendering vertically.
I’ve seen this happen with Easy Google Fonts in Page Builder before but am not sure why.
So specifically, when you de-activated Easy Google Fonts, did that text start to render normally in full width, left to right fashion instead of vertically?
We might just be looking at an incompatibility between Easy Google Fonts and Page Builder.
The problem seemed to be the code
I removed it from the row, and now the allignement is orizontal.
Tried to set the borders of the raw (and widget) in the Attributes > CSS
tried also with margins, but can’t get back the effect of getting smaller width than rest of the page, as it previously was
Nicely done. Can you just remind me quickly. Do you want the page contents to the same width as your blue box: INSPIRATION IS THE REASON YOU SHOULD TRAVEL ?
Just a bit wider
Sorry! Lost you along the way here.
The blue box has a max-width set manually using CSS:
INSPIRATION IS THE REASON YOU SHOULD TRAVEL
And the reason you won’t miss travel (so much)
To adjust that just edit the widget and adjust the max width set under Attributes.
If you have a moment, a screenshot with arrows etc indicating what you’d like to do is helpful. Apologies for the delay. We’ll get you sorted as soon as possible.
I fixed the width issue, but still couldn’t for the margin (text too close to the widget box).
I tried to add margin in attributes>css, but it doesn’t change.
I don’t understand how to insert a screenshot here.
If you upload your screenshot to your Media Library you can then click on the image in the Media Library and copy the image link located in the right column.
I’m unable to view your site at the moment:
http://thebutterflyhunter.net/starthere/
Parse error: syntax error, unexpected ‘}’ in /home/thebutt3/public_html/wp-content/themes/vantage/functions.php on line 468
Did you perhaps try edit the theme functions.php file? All WordPress.org themes completely overwrite their own folders during theme updates. No changes should be made directly to the parent theme files as those changes won’t survive a theme update.
To recover, go to /wp-content/themes/ on your server using either FTP or Hosting File Manager. Delete the “vantage” folder. This will allow admin access again.
To re-install, find the ZIP file here for Vantage Premium:
Private Snippet
You can install from Appearance > Themes > Add New: Upload Theme > Activate.
ok, I try to do that (I opened a thread for that issue). By doing that do I lose all my Custom CSS? There is a way to save /copy it before I cancel the theme?
ok, I fixed it through C-panel (deleted the code I added in the functions.php). Thanks.
Back, to teh previous post. This is the screenshot, taken from a tablet. The issue is text is too close to the border (“etc.”).
http://thebutterflyhunter.net/wp-content/uploads/2015/10/IMG_35311.png
Sure. Edit the widget concerned, click Attributes top right and in the CSS Styles field insert:
Ok, fixed! thanks a lot
Super, glad to hear you made progress.
All the best.