Adding extra css class breaks column layout

I thought I had a solution to the problem of an unsightly header in a column text block with a border. Instead, adding an extra css class to any column text block, placed anywhere, top to bottom, in the first column using tagdiv composer breaks the 2 column layout, pulling all blocks into the first column and corrupting the header at the top of the second column. (column layout 2+1 with sticky column on front page, using your special class name for the row to get the column to work. I also have a full width row with a banner article above the 2+1 row.)

Details: Padding a text box with a border to move the text away from the border edges unfortunately also pads the header, which leaves an unsightly white strip beside it (using your default header, or any other header with a coloured background). The solution seemed to me to add an extra class to the text box (I tried several class names, all broke the column layout, whether or not there was any custom css composed for them.) The intent in css was: .adjust-title-somewhat.block-title {
margin-left:-4px;
}
The simple custom css ‘block.text {margin-left:-4px}’ works fine an all titles, unfortunately, as I have several titles not within a block and they promptly adjust leftward too. So, giving the titled block an extra class – a slight nuisance – seemed a solution to pinpoint the css change to that class only. (There may be a better way using a default parent class that identifies block titles from stand-alone titles, but I haven’t figured that out.)

At any rate, whether there is css information in the custom css for the ‘column text block’ particular extra class name or not, the simple presence of an extra class name in any column text block seems to completely screw up the layout once it is saved.

Ideas? Another way of preventing/removing the unsightly padding (or margining) of the title? Needless to say I do NOT want to go with a title without a background color, which would at least mask the title problem.

Regards,

Alan

Hi Bogdan,

Sorry to say you are wrong. (So am I.) I did say actually that there was no custom code, because I had removed it all as a first step. But it turned out that entering Tagdiv Composer and doing ANYTHING or NOTHING and then saving the change (or no change) would cause the second column to append double width to the first, and make it impossible to continue.

I backed up until I found a saved version of the page where that didn’t happen, and tried to remove things from column 1 and/or column 2 bit by bit (including some raw html sections, which I suspected. However, after endless rounds of removing and saving and checking and thinking I had solved the problem, suddenly each time it resulted in the column layout breaking again. You have so much custom hexadecimal coding (as opposed to HTML/CSS styling embedded in the blocks that I simply can go no further. I think I need another theme that allows me to build blocks of text and raw html with some ability to troubleshoot them. I acknowledge entirely how strong your theme is for magazine-style photoblogging, but its not going to work for my largely text needs.

Regards,

Alan

I found the bug, (and it is a bug!)

I tackled the problem with renewed determination and got results. I’m looking more fondly on TD Composer this morning.

The bug occurred because I was testing a column text block to see if custom css could prevent the padding of a text block title but not the text below it.

While the text padding moves the text away from a border (good), the ‘me-too’ header padding leaves an unsightly white strip beside the colored background of the header (bad). I need to make it clear that Custom CSS was empty while creating (and re-creating endlessly) this bug.

So . . .

Home Page Layout:
• Full width row with banner image
• 2/3:1/3 row with ‘td-ss-row’ added class to make the 1/3 row sticky.
• inner row 1/2:1/2 .
• several blocks in each of the two columns, a mix of column text and raw html blocks

At the bottom of the left hand column (as it turns out bug will work at any place up or down the column) I put a default column text block. I changed the title to ‘Test Title Adjust” but I was happy with the default text (it was only a test, after all!)

so I did not change it

. I gave the block an all-around border and padded it left and right in order to create the unsightly header I was hoping to correct.

It saved fine the first time in TD Composer and displayed correctly in the page. However, TD composer did not append a [/vc_column_text] shortcode to close this block with its default text.

When I next open then save this page in TD Composer (without doing anything else), it is apparently confused by the [vc_column_text beginning. . . .] but no [/vc_column_text] shortcode to close the block.

Its response to the confusion is rather strange! At the head of the second column, it adds a second pair of quote marks like so: [vc_column_inner width=”1/2”] becomes [vc_column_inner width=””1/2””]. This breaks the layout, placing a full width second column under the ½ width first column. (repeat visits to TD Composer seem to sprinkle pairs of quotes in places down the second column, but I haven’t really explored that.)

Removing the extra quote marks around the column width restores the layout (only momentarily, if the padded default text box does not have new text added to trigger the adding of [/vc_column_text].)

Demand that users change the text? Otherwise don’t create the box? Alert box them if they don’t? Add the closing shortcode anyway?

So, continuing on, it seems, I’m still playing with the column text block title that I’m trying to ‘unpad’. I can get every title including standalone titles to ‘unpad’ by using custom css ‘.block-title{ margin-left: -4px}’ but that leaves all the standalone titles jutting left and looking unsightly. Any ideas on how I can identify only those titles within a text box?

Thanks for the offer of the refund, but I’m perfectly happy with Newspaper and TD Composer (much better than Visual Composer) for the photo magazine blog for which I bought the theme and for which it is licensed.

I’ve been taking a liberal interpretation of localhost usage to try the theme out for a client looking to port a much more text-based DNN website to WordPress (which will, if and when it sees the light of day, require a new purchase/license.) This is the project I’m not so sure about, but finding the bug has certainly improved my mood!

Regards,

Alan

hi Simion,

Custom CSS can be used to ‘unpad’ the header as well: .td-block-title-wrap { margin-left:-4px; }

As to what people ‘would do’ with a default text block, how can you be so sure?

I am laying out a page with 4 text blocks, coloured borders and heads, and I know what the titles are, but somebody else is working on the text.

Is it somehow unreasonable for me to lay out these blocks with their default text, waiting to put the actual text in later? Meanwhile, all of the blocks will break the layout.

You should fix this. What people ‘should’ or ‘would’ do is not as obvious as you think.

regards,

Alan